Axios Interceptor

Axios Interceptor

Axios 인터셉터는 Axios 요청 및 응답을 가로채고 변형하는 데 사용되는 기능입니다. 이를 통해 요청과 응답에 대한 일관된 로직을 적용하고, 헤더를 추가하거나 수정하거나 에러 처리를 수행하는 등의 작업을 수행할 수 있습니다.

Axios 인터셉터는 axios.interceptors 객체를 사용하여 정의됩니다. 이 객체에는 request와 response를 인터셉트하는 두 가지 유형의 인터셉터가 있습니다

예시

import axios from 'axios';

// Request 인터셉터 추가
axios.interceptors.request.use(
  config => {
    // 요청 전에 수행할 작업을 여기에 작성합니다.
    // config 객체를 수정하거나 헤더를 추가할 수 있습니다.
    return config;
  },
  error => {
    // 요청에 오류가 발생한 경우 처리할 작업을 여기에 작성합니다.
    return Promise.reject(error);
  }
);

// Response 인터셉터 추가
axios.interceptors.response.use(
  response => {
    // 응답을 받기 전에 수행할 작업을 여기에 작성합니다.
    // 응답 데이터를 수정하거나 필터링할 수 있습니다.
    return response;
  },
  error => {
    // 응답에 오류가 발생한 경우 처리할 작업을 여기에 작성합니다.
    return Promise.reject(error);
  }
);

// 실제 요청 보내기
axios.get('https://api.example.com/data')
  .then(response => {
    // 요청이 성공한 경우 수행할 작업을 여기에 작성합니다.
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 실패한 경우 수행할 작업을 여기에 작성합니다.
    console.error(error);
  });

Axios 인터셉터를 사용하면 예를 들어 토큰 인증, 요청 로깅, 에러 처리 등과 같은 일관된 작업을 모든 요청과 응답에 적용할 수 있습니다. 인터셉터는 개발자에게 편의성과 유연성을 제공하여 Axios를 효과적으로 사용할 수 있게 도와줍니다.