[React] Axios Interceptor

엑시오스 인터셉터는 HTTP 요청과 응답을 가로채서 처리할 수 있는 기능입니다. 인터셉터를 사용하면 요청 전, 응답 전에 추가 작업을 수행할 수 있습니다. 이를 통해 요청과 응답을 수정하거나, 오류 처리, 로깅 등 다양한 용도로 사용할 수 있습니다.

용도

1. 인증 헤더 추가: 요청 전에 인증 헤더를 추가하여 보호된 API 요청을 수행할 수 있습니다.
2. 오류 처리: 요청이나 응답에서 오류가 발생했을 때 처리할 수 있습니다.
3. 로그 생성: 요청과 응답을 로깅하여 디버깅이나 모니터링에 사용할 수 있습니다.
4. 헤더 수정: 요청과 응답의 헤더를 수정하여 필요한 정보를 추가할 수 있습니다.

기능 동작 방식

엑시오스 인터셉터는 요청과 응답을 가로채기 전에 실행되는 함수를 정의합니다. 이 함수는 요청이나 응답을 수정하거나, 새로운 작업을 수행할 수 있습니다.

예시

javascript

import axios from 'axios';

// 요청 인터셉터
axios.interceptors.request.use(function (config) {
  // 요청 전 작업 처리
  console.log('Request:', config);
  return config;
}, function (error) {
  // 요청 에러 처리
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(function (response) {
  // 응답 전 작업 처리
  console.log('Response:', response);
  return response;
}, function (error) {
  // 응답 에러 처리
  return Promise.reject(error);
});

위 예시에서는 요청과 응답을 가로채서 콘솔에 로그를 출력합니다. 이와 같은 방식으로 인터셉터를 사용하여 요청과 응답을 처리할 수 있습니다.

이 외에도 인터셉터를 사용하여 다양한 작업을 수행할 수 있으며, 커스텀 인스턴스에서도 인터셉터를 추가할 수 있습니다.