[javascript] Axios와 함께 사용할 수 있는 책갈피 방법
Axios는 JavaScript에서 HTTP 비동기 통신을 처리하기 위한 인기 있는 라이브러리입니다. 이 라이브러리는 클라이언트 측에서 서버로 데이터를 보내고 받는 작업을 간단하게 처리할 수 있습니다. 이번 글에서는 Axios와 함께 사용할 수 있는 책갈피 방법을 알아보겠습니다.
취소 토큰 활용
Axios는 취소 토큰을 사용하여 HTTP 요청을 취소하는 기능을 제공합니다. 이를 통해 만약 요청을 보낸 후에 해당 작업이 취소되어야 할 경우, 취소 토큰을 사용하여 요청을 중단할 수 있습니다.
import axios from 'axios';
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/api/data', {
cancelToken: source.token
}).then(response => {
// 요청 성공 시 처리 로직
}).catch(error => {
if (axios.isCancel(error)) {
console.log('요청이 취소되었습니다.', error.message);
} else {
console.log('에러 발생', error.message);
}
});
// 요청 취소
source.cancel('사용자에 의해 요청이 취소되었습니다.');
인터셉터 활용
Axios는 인터셉터(interceptor)를 사용하여 요청과 응답을 가로채고 변경할 수 있는 기능을 제공합니다. 이를 통해 요청 전에 헤더를 추가하거나, 응답을 변환하는 등의 작업을 할 수 있습니다.
import axios from 'axios';
// 요청 인터셉터 설정
axios.interceptors.request.use(config => {
// 요청 전에 작업할 코드
config.headers['Authorization'] = 'Bearer token';
return config;
}, error => {
return Promise.reject(error);
});
// 응답 인터셉터 설정
axios.interceptors.response.use(response => {
// 응답 전에 작업할 코드
return response;
}, error => {
return Promise.reject(error);
});
// GET 요청 보내기
axios.get('/api/data')
.then(response => {
console.log('응답:', response.data);
})
.catch(error => {
console.log('에러 발생:', error.message);
});
요청 공통 설정
Axios를 사용할 때 모든 요청에 대해 공통 설정을 적용하고 싶은 경우 axios.create 메서드를 사용하여 인스턴스를 생성하고 설정할 수 있습니다.
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com/',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});
instance.get('/api/data')
.then(response => {
console.log('응답:', response.data);
})
.catch(error => {
console.log('에러 발생:', error.message);
});
이렇게 생성된 인스턴스는 기존의 Axios 인스턴스와 동일한 메서드를 사용할 수 있지만, 미리 설정한 값들이 적용됩니다.
결론
Axios는 다양한 기능과 쉬운 사용법으로 JavaScript에서 HTTP 통신을 다루는 데 유용한 도구입니다. 책갈피 방법을 활용하면 더욱 효율적인 개발을 할 수 있으며, 웹 애플리케이션에서 서버와의 데이터 통신을 간편하게 처리할 수 있습니다.