Axios
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
설치
npm install axios
JavaScript
복사
사용법
Promise
const axios = require('axios');
axios.get('/user', {
params: {
ID: 12345
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
.then((response) => {
// ...
});
JavaScript
복사
Async
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
JavaScript
복사
멀티 요청
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
JavaScript
복사
API
// axios(config)
axios({
method: '',
url: '',
data: {
}
});
JavaScript
복사
Instance methods
method를 config에서 설정하지 않고 아래처럼 사용할 수 있다.
별칭 메소드를 사용하면 config에서 url, method 및 data 속성을 지정할 필요 없음.
axios.get(url[, config]) // GET
axios.post(url[, data[, config]]) // POST
axios.put(url[, data[, config]]) // PUT
axios.patch(url[, data[, config]]) // PATCH
axios.delete(url[, config]) // DELETE
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])
JavaScript
복사
+ DELETE 메소드 사용 시 body값을 전달하고 싶다면?
Config
{
// 요청에 사용될 서버 URL
url: '/user',
// 요청을 할 때 사용될 메소드.
method: 'get', // default
// url 속성 값이 절대 URL이 아니라면 url 앞에 baseURL 속성 값이 붙는다.
baseURL: 'https://www.soyou.space/',
// 서버에 요청을 보내기 전, 요청 데이터를 변경. PUT, POST, PATCH에만 적용 가능
// 배열의 마지막 함수는 버퍼의 문자열이나 인스턴스를 반환해야함 (?)
transformRequest: [function (data, headers) {
... // 데이터 변환 수행 후, 반환
return data;
}],
// 서버에 전송 될 사용자 정의 헤더
headers: {
accept: 'application/json',
Authorization:
},
// 요청과 함께 전송 될 URL parameter
params: {
id: 1
},
// 요청 body로 전송할 데이터. PUT, POST, PATCH에만 적용 가능
data: {
},
// 자격 증명(credentials)을 사용하여 Cross-site Access-Control 요청이 필요한 경우 설정
withCredentials: false, // default
// 요청이 타임 아웃되는 밀리 초(ms) 설정
timeout: 0, // 기본값
// headers 안의 authorization 설정
auth: {
...
},
// 서버에서 응답할 데이터 타입을 설정
// ['arraybuffer', 'blob', 'document', 'json', 'text', 'stream']
responseType: 'json', // 기본값
}
JavaScript
복사
응답 스키마
{
// `data`는 서버가 제공한 응답(데이터)입니다.
data: {},
// `status`는 서버 응답의 HTTP 상태 코드입니다.
status: 200,
// `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
statusText: 'OK',
// `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
headers: {},
// `config`는 요청에 대해 `axios`에 설정된 구성(config)입니다.
config: {},
// `request`는 응답을 생성한 요청입니다.
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)
request: {}
}
JavaScript
복사