axios interceptors 인터셉터 요청/응답 전

axios는 HTTP 클라이언트 라이브러리로, HTTP 요청을 보내고 응답을 받는 것을 간단하게 처리할 수 있다.

이번 사이드프로젝트를 하면서 axios에서 인터셉터를 사용하여 요청/응답을 가로채는 기능을 정리해보려고 한다.

보통 요청 전과 후에 로그인 후에 헤더에 Authorization을 담는 작업들을 할 수 있다.

 

api요청마다 이렇게 axios를 사용해서 인터셉터를 만들고 사용하게 되면 각 요청마다 정의하지 않고 사용할 수 있기 때문에 참 좋은 라이브러리인것 같다!

 

인터셉터 | Axios Docs

- 공식문서에서도 잘 나와있기 때문에 사용하는데에 큰 어려움은 없다.

---

axios 인터셉터 사용방법

// 요청 인터셉터
axios.interceptors.request.use(function (config) {
    // 1. 요청 전달되기 전 작업 처리
    // config를 설정할 수 있다
    return config;
  }, function (error) {
    // 2. 요청 에러가 있는 작업 처리
    return Promise.reject(error);
  });

// 응답 인터셉터
axios.interceptors.response.use(function (response) {
    // 응답 200번대 status일 때 응답 성공 직전 호출
    // 3. 이 작업 이후 .then()으로 이어진다
    return response;
  }, function (error) {
    // 응답 200번대가 아닌 status일 때 응답 에러 직전 호출
    // 4. 이 작업 이후 .catch()로 이어진다
    return Promise.reject(error);
  });

- request : 요청을 보내기 전 작업처리를 추가할 수 있다

- response : 서버에서 받은 응답 코드에 따라서 응답이 return 되기 전에 인터셉터로 가로채서 작업들을 추가할 수 있다.

 

* 예시처럼 상태코드를 통해서도 특정 로직을 처리할 수 있다.

- 로그인 후 Authorization을 통해서 인증을 처리할 때,

- Access토큰의 만료에 따라 refresh 토큰을 처리할 때,

등등으로 api요청 전 사용할 수 있다.