Axios는 많이 사용되는 JavaScript 라이브러리로, HTTP 클라이언트를 통해 서버와 통신하는 기능을 제공합니다. Axios는 요청을 보내거나 응답을 받을 때 인터셉터(Interceptor) 기능을 제공하여 요청과 응답의 전처리 및 후처리를 할 수 있습니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

인터셉터란?

인터셉터는 Axios에서 요청 전송 전과 응답 수신 후에 실행되는 함수입니다. Axios는 다음과 같은 인터셉터를 제공합니다.

• 요청 인터셉터: 요청 전에 실행되는 인터셉터로, 요청 데이터를 수정하거나 헤더를 추가하는 등의 작업을 할 수 있습니다.
• 응답 인터셉터: 응답을 수신한 후 실행되는 인터셉터로, 응답 데이터를 가공하거나 오류 처리를 할 수 있습니다.

요청 인터셉터 사용하기

Axios에서 요청 인터셉터를 사용하려면 axios.interceptors.request.use() 메서드를 사용합니다. 다음은 해당 메서드를 사용한 예시입니다.

axios.interceptors.request.use((config) => {
  // 요청 전에 실행될 코드 작성
  config.headers.Authorization = getToken(); // 헤더에 인증 토큰 추가하기
  return config;
}, (error) => {
  // 요청 전에 에러 발생 시 실행될 코드 작성
  return Promise.reject(error);
});

위의 예시 코드에서는 axios.interceptors.request.use() 메서드로 요청 전 인터셉터를 등록하고 있습니다. 이 인터셉터는 요청을 보내기 전에 실행되며, config 객체를 매개변수로 받습니다. config 객체는 요청과 관련된 설정을 담고 있으며, 이를 통해 요청 데이터나 헤더를 수정할 수 있습니다. 예시 코드에서는 config.headers에 인증 토큰을 추가하는 작업을 수행하고 있습니다.

응답 인터셉터 사용하기

Axios에서 응답 인터셉터를 사용하려면 axios.interceptors.response.use() 메서드를 사용합니다. 다음은 응답 인터셉터를 사용한 예시입니다.

axios.interceptors.response.use((response) => {
  // 응답 수신 후 실행될 코드 작성
  return response.data; // 응답 데이터 반환
}, (error) => {
  // 응답 수신 후 에러 발생 시 실행될 코드 작성
  return Promise.reject(error);
});

위의 예시 코드에서는 axios.interceptors.response.use() 메서드로 응답 인터셉터를 등록하고 있습니다. 이 인터셉터는 응답을 수신한 후 실행되며, response 객체를 매개변수로 받습니다. response 객체는 응답에 관련된 정보를 담고 있으며, 이를 통해 응답 데이터를 가공하거나 오류 처리를 할 수 있습니다. 예시 코드에서는 응답 데이터를 반환하고 있습니다.

결론

Axios를 사용하여 요청 전처리와 응답 후처리를 수행하는 방법에 대해 알아보았습니다. 이를 통해 요청과 응답에 대한 작업을 간단하고 간결하게 처리할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다.

더 자세한 내용은 Axios 공식 문서를 참고해주세요.