Axios는 브라우저 및 Node.js를 위한 간단한 Promise 기반 HTTP 클라이언트이며, 주로 TypeScript와 함께 사용됩니다. Axios를 사용하다가 HTTP 요청이 발생하기 전에 요청 데이터를 수정하고 싶은 경우, 인터셉터를 사용하여 해결할 수 있습니다.

Axios 인터셉터란?

Axios 인터셉터는 HTTP 요청과 응답을 가로채고 변형할 수 있는 기능을 제공합니다. 이를 사용하여 전역 설정, 권한 부여, 로깅 등 다양한 작업을 수행할 수 있습니다.

요청 데이터 인터셉트하기

HTTP 요청에 대한 데이터를 인터셉트하려면 request 인터셉터를 사용합니다. 이를 통해 요청 데이터를 수정하거나, 헤더를 추가하는 등의 작업을 수행할 수 있습니다.

예를 들어, Bearer 토큰을 요청 헤더에 추가하는 코드는 아래와 같습니다.

import axios, { AxiosRequestConfig } from 'axios';

axios.interceptors.request.use((config: AxiosRequestConfig) => {
  const token = 'YOUR_BEARER_TOKEN';
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

위 코드에서 axios.interceptors.request.use를 사용하여 Axios에 요청 전 인터셉터를 추가하고, 해당 함수 내에서 요청 헤더에 Bearer 토큰을 추가하고 있습니다.

요청 데이터 인터셉터 핸들링

인터셉터 함수 내에서는 요청 데이터를 수정하거나 새로운 데이터로 대체할 수 있습니다. 또한, 인터셉터 함수에서 return 키워드를 통해 핸들링된 데이터를 반환해야 합니다.

결론

Axios 인터셉터를 사용하면 HTTP 요청에 대한 데이터를 가로채고 수정할 수 있어 편리합니다. 이는 인증 토큰 추가, 에러 핸들링, 로깅 등 다양한 작업에 활용될 수 있습니다.

이상으로 Axios 인터셉터 및 요청 데이터 인터셉트에 대한 내용을 알아보았습니다.

참고문헌:

• Axios Interceptors
• Axios GitHub Repository