Axios
서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다.
Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다.
설치하기
- NPM을 사용하여 설치
npm install axios
- Yarn을 사용하여 설치
yarn add axios
그 후 프로젝트에서 import 해야 합니다.
import axios from "axios";
만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다.
문법
fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다.
axios(url, {
// 설정 옵션
});
HTTP 메서드를 붙일 수도 있습니다.
axios.get(url, {
// 설정 옵션
});
fetch 메서드처럼 HTTP 메서드 없이 요청할 경우 기본적으로 GET 요청을 생성합니다.
axios(url);
또, 두 번째 인자를 사용해서 커스텀 설정하는 것도 가능합니다.
axios(url, {
method: "get", // 다른 옵션도 가능합니다 (post, put, delete, etc.)
headers: {},
data: {},
});
아래처럼 작성할 수도 있습니다.
axios({
method: "get",
url: url,
headers: {},
data: {},
});
JSON 데이터 처리
아래 예제에서는 JSONPlaceholder라는 REST API에 GET 요청을 통해 투두 리스트의 아이템을 가져옵니다.
const url = "<https://jsonplaceholder.typicode.com/todos>";
axios
.get(url)
.then((response) => console.log(response.data));
Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있습니다.
응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있습니다.
자동 문자열 변환(stringify)
이제 JSONPlaceholder API를 사용해서 데이터를 전송해보겠습니다.
이를 위해서는 데이터를 JSON 문자열로 직렬화 해야 합니다.
POST 메서드로 JavaScript 객체를 API로 전송하면 Axios가 자동으로 데이터를 문자열로 변환해줍니다.
const url = "<https://jsonplaceholder.typicode.com/todos>";
const todo = {
title: "A new todo",
completed: false,
};
axios
.post(url, {
headers: {
"Content-Type": "application/json",
},
data: todo,
})
.then(console.log);
Axios로 post 요청을 할 때 요청 본문(request body)으로 보내고자 하는 data는 data 프로퍼티에 할당합니다.
컨텐츠 유형 헤더도 설정할 수 있습니다. 기본적으로 axios는 Content-Type을 application/json으로 설정합니다.
에러 처리
Promise가 거부(reject)되면 .catch()를 사용하여 에러를 처리할 수 있습니다.
.catch()를 사용한 일반적인 에러 처리는 다음과 같습니다.
const url = "<https://jsonplaceholder.typicode.com/todos>";
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});
Axios의 promise는 상태 코드가 2xx의 범위를 넘어가면 거부(reject)합니다.
에러 객체에 응답(response) 또는 요청(request) 프로퍼티가 포함되어 있는지 확인하여 에러에 대한 자세한 정보를 확인할 수 있습니다.
.catch((err) => {
// 에러 처리
if (err.response) {
// 요청이 이루어졌고 서버가 응답했을 경우
const { status, config } = err.response;
if (status === 404) {
console.log(`${config.url} not found`);
}
if (status === 500) {
console.log("Server error");
}
} else if (err.request) {
// 요청이 이루어졌으나 서버에서 응답이 없었을 경우
console.log("Error", err.message);
} else {
// 그 외 다른 에러
console.log("Error", err.message);
}
});
에러 객체의 response 프로퍼티는 클라이언트가 2xx 범위를 벗어나는 상태 코드를 가진 에러 응답을 받았음을 나타냅니다.
에러 객체의 request 프로퍼티는 요청이 수행되었지만 클라이언트가 응답을 받지 못했음을 나타냅니다.
요청 또는 응답 속성이 모두 없는 경우는 네트워크 요청을 설정하는 동안 오류가 발생한 경우입니다.
응답 시간 초과 / 요청 취소
HTTP 클라이언트에서 HTTP 요청이 시간 초과될 경우,
Axios에서는 timeout 속성을 설정 객체에 추가하여 요청이 종료될 때까지의 시간을 밀리초로 지정할 수 있습니다.
다음 예제에서는 만약 요청이 4초 이상 걸릴 경우에 종료하고 console창에 error를 로깅하고 있습니다.
const url = "<https://jsonplaceholder.typicode.com/todos>";
axios
.get(url, {
timeout: 4000, // 기본 설정은 '0'입니다 (타임아웃 없음)
})
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});
취소 토큰을 통한 요청 취소
아래와 같이 CancelToken.source팩토리를 사용하여 취소 토큰을 만들 수 있습니다.
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 에러 핸들링
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 요청 취소하기 (메시지 파라미터는 옵션입니다)
source.cancel('Operation canceled by the user.');
실행자 함수를 CancelToken 생성자에 전달하여, 취소 토큰을 만들수도 있습니다.
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// 실행자 함수는 취소 함수를 파라미터로 받습니다.
cancel = c;
})
});
// 요청 취소하기
cancel();