[React] Axios Intercepter

이애진·2022년 11월 12일

React

목록 보기

15/28

1. 배경

비동기 통신할 때 intercepter를 사용하는 큰 이유는 유지보수 측면에서 효율적으로 관리할 수 있기 때문이다 (물론 다른 이유도 있겠지만)

장점은 아래와 같다

api 호출할 때마다 axios 인스턴스를 생성하지 않아도 된다
axios 마다 동일한 헤더 값 처리가 가능하다
timeout 시간, base url 등에 대한 중복 처리가 가능하다

2. How To Use

import axios from "axios";

export const TestRestInstance = axios.create({
    baseURL: [target url],
    timeout: 500,
});

먼저 axios를 생성한다
차후 해당 instance를 통하여 다른 파일에서 사용할 수 있다

instance.interceptors.request.use(
  (config) => {
    config.headers = {
      ...config.headers,
      "Content-Type": "application/json; charset=utf-8",
    };

    return config;
        },
  (error) => {
    // eslint-disable-next-line no-console
    console.log(error);
    
    return Promise.reject(error);
  }
);

axios request 처리한다
config에 해더를 설정하고 오류 설정 시에는 reject시킨다

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // eslint-disable-next-line no-console
    console.log(error);

    return Promise.reject(error);
  }
);

axios response 처리한다

useEffect(() => {
    const init = async () => {
      const { data } = await TestRestInstance.get("/posts/1");

      console.log(data);
    };

    init();
  }, []);