[Vue.js] axios의 interceptors

 

 

axios...🤦🏻‍♀️ 새로운건 왜 이렇게 많을까..

머리가 조금 아프지만.. 내 프로젝트에도 적용해 볼 예정...

 

 

◽ interceptor

모두가 알다시피 '가로채다'라는 의미이다. 

내가 만드는 귀여운 프로젝트는 header에 어떤 값도 실을 필요가 없어서(나의 편의를 위한..) 필요성을 느끼지 못했다.

하지만 생각해보면 매번 API를 호출할 때 마다 header에 똑같은 값을 싣는 로직을 쓸 수는 없는 노릇이다.

axios의 interceptors를 사용하면 요청/응답 시 필요한 동작을 처리해주고 에러도 한번에 처리할 수 있다.

 

◽ 사용방법

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

 

◽ 예제

// header에 값을 싣는다.
instance.interceptors.request.use(
  function (config) {
    config.headers["Content-Type"] = "application/json; charset=utf-8";
    config.headers["Authorization"] = " 토큰 값";
    return config;
  },
  function (error) {
    console.log(error);
    return Promise.reject(error);
  }
);

 

 

 

출처

https://yamoo9.github.io/axios/guide/interceptors.html

🌟 https://velog.io/@skyepodium/axios-인터셉터로-API-관리하기

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.