axios interceptor

인터셉터는 왜 필요할까?

우선 내가 이해한 것은 중복되는 코드를 수정해야 할 때 하나의 변수로 만들어둔다면 훨씬 수정이 용이해진다.  단순하게 편하니까 사용한다..?

 

axios interceptor는 코드 흐름을 가로 채서 관여하는 두 상황이 있는데 

(1) 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전)
(2) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전

이 있다. 

 

그래서 주로 쓰이는 곳은 

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링

라고 한다.

사용법

src 폴더에 axios 폴더를 만들어준다.  그리고 axios 폴더 안에  api.js를 생성해서  instance를 만들어 줄 것이다.

import axios from "axios";

const instance = axios.create({
 
});

export default instance;

그리고  .env 파일을 root 경로(가장상위폴더)에 생성한 후  데이터 url을 변수 선언 해준다. 

REACT_APP_SERVER_URL = http://localhost:4000

그리고 app.jsx에서 

axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`)

url을 이렇게 수정해준다. 

 

그리고 api.js로 돌아가

baseURL을 지정해 줄 것이다. 

const instance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
});

그렇게 되면  아까 app.jsx에서 수정했던 url들은 

import api from "./axios/api";

api.get(`/todos`)

api.js를 import 해와서 적용하면 이렇게 까지 간결하게 작성할 수 있다. 

 

그리고 흐름을 가로채는 순간을 직접적으로 체크 해보자

instance.interceptors.request.use(
  //요청을 보내기 전 수행되는 함수
  function (config) {
    console.log("인터셉터 요청 성공");
    return config;
  },
  //오류 요청을 보내기 전 수행되는 함수
  function (error) {
    console.log("인터셉터 요청 오류");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  //응답을 내보내기 전 수행되는 함수
  function (response) {
    console.log("인터셉터 응답 받았습니다.");
    return response;
  },
  //오류 응답을 내보내기 전 수행되는 함수
  function (error) {
    console.log("인테셉터 응답 오류 발생");
    return Promise.reject(error);
  }
);

instance.interceptor.(request/ response).use()는 두 함수를 받는데  정상적인 요청/응답과 오류의 담은 함수를 받고 있다.

이때 오류를 내보내기 전 수행되는 함수는 꼭 Promise.reject()로 반환해야 한다.