[JS] Axios 인터셉터

🎈 Axios 인스턴스

사용자 지정 config로 새로운 Axios 인스턴스를 만들 수 있다.
baseUrl, headers, timeout, 토큰 등을 반복해서 작성할 필요가 없어진다.
401(Unauthorized) 에러 발생 시 토큰을 쉽게 갱신하여 재요청을 보낼 수 있다.

const instance = axios.creat({
  baseURL: "baseURL",
  timeout: 밀리초,
  headers: {
    "Content-Type": "application/json",
    Authorization: localStorage.getItem("token"),
  }
})

🎈 인터셉터란?

요청을 보내기 직전, 응답을 받은 직후에
Axios 인스턴스가 미리 등록한 핸들러들을 실행한다

API 요청마다 반복 작업을 해야할 때 (헤더에 토큰 싣기 등) 사용한다.

🎈 요청 인터셉터

instance.interceptors.request.use(함수1, 함수2)

요청 전달 전 실행될 콜백 함수 (함수1)
오류 요청 전달 전 실행될 콜백 함수 (함수2)

instance.interceptors.request.use(
  (config) => {
    // 요청 보내기 전 수행할 일
    return config;
  },
  (error) => {
    // 오류 요청을 보내기 전 수행할 일
    return Promise.reject(error);
  }
);

🎈 응답 인터셉터

instance.interceptors.response.use(함수1, 함수2)

응답 데이터 받은후 실행될 콜백 함수 (함수1)
오류 데이터 받으면 실행될 콜백 함수 (함수2)

instance.interceptors.response.use(
  (config) => {
    // 응답 데이터 처리
    return config;
  },
  (error) => {
    // 오류 응답 처리
    // error.response.status 값(400, 401 등)에 따라 수행할 동작 지정
    return Promise.reject(error);
  });

🎈 인스턴스로 요청 보내기

instance.get('url')
  ...

함수 작성 예시

const getLogin= (props) => {
  instance.get(props)
}