인터셉터와 Axios를 사용한 글로벌 HTTP 요청

인터셉터란 무엇입니까? 그리고 axios 요청 및 응답을 가로채는 방법.

어떤 이유로 해당 메서드 실행 전후에 실행해야 하는 코드 조각을 메서드에 삽입하려는 경우 인터셉터가 도움이 됩니다. 다음 예제에서 우리는 Array.prototype.reverse에 인터셉터 메소드를 만들었습니다. 이 메소드는 역방향 전과 역방향 후에 배열의 값을 콘솔합니다.

// store original implementation in cache
var _reverse = Array.prototype.reverse;

// define your own reverse method
Array.prototype.reverse = function() {

   // before reversing array
   console.log("before reverse \n"+this.toString());

   // call original Array reverse method
   _reverse.apply(this, arguments );

   // do whatever you like after
   // the reverse has been called
       console.log("after reverse\n"+this.toString());
}

const array1 = ['one', 'two', 'three'];

array1.reverse();
   }
}

axios 요청 가로채기

axios가 무엇인지 모르는 사람들을 위해? "Axios는 브라우저와 node.js를 위한 약속 기반 HTTP 클라이언트입니다."인터셉터의 도움으로 라이브러리에서 각 메소드가 호출되기 전에 요청과 응답을 수정할 수 있습니다. 인터셉터는 한 곳에서 모든 요청에 ​​공통 기능을 적용하는 데 도움이 될 수 있습니다.

const HTTP = axios.create({
 baseURL: env.API_URL,
 timeout: 60000,
});

HTTP.interceptors.request.use(
 (config) => {
  config.headers.authorization = `Bearer ${localStore.getToken()}`;
   return config;
 },
 (error) => {
   return Promise.reject(error);
 }
);

// Add a response interceptor
HTTP.interceptors.response.use(
 (response) => {
   return response;
 },
 (err) => {
        console.log(err)
 }
);

위의 예에서와 같이 axios 인스턴스를 생성하고 두 개의 인터셉터를 하나는 요청에, 다른 하나는 응답에 사용하는 것을 볼 수 있습니다. 요청 인터셉터에서는 로컬 저장소에서 토큰을 가져와 요청 헤더에 넣고 토큰을 가져오는 동안 오류가 발생한 경우 요청을 즉시 거부합니다. 응답에 대한 또 다른 하나는 응답(모든 상태 코드는 2xx 사이에 있음)과 오류 처리를 위한 두 개의 콜백도 있습니다.