Axios 인터셉터를 사용하는 4가지 방법

Axios란 무엇인가?

Axios는 브라우저 및 node.js에서 Promise 기반의 HTTP 클라이언트 입니다.

JSON 응답을 자동으로 감지하고 일반 텍스트 대신에 response.json()과 같은 구문 없이도 객체를 반환하고 응답 상태 코드가 400 보다 큰 경우 자동으로 오류를 발생시켜주는 등 다양한 기능들이 있습니다.

Axios Interceptor란 무엇인가?

Axios 인터셉터는 요청을 보내거나 받을 때마다 라이브러리가 호출하는 함수입니다. 

"then" 또는 "catch"로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

// request interceptors 사용
axios.interceptors.request.use((config) => {
    // request를 보내기 전에 사용
    // doSomething();
    return config;
}, (error) => {
	// request가 error 났을 시
    return Promise.reject(error);
});

// response interceptors 사용
axios.interceptors.response.use((response) => {
    // 200번대의 어떤 상태 코드 범위 내에 들어오게 되면 여기에서 response를 이용해서 뭔가 하고싶은 것을 하면 됨
    return response;
}, (error) => {
    // 200번대의 어떤 상태 코드 범위 이외의 에러 상태일 때 사용
    // response error를 가지고 어떤 상태 처리를 사용
    return Promise.reject(error);
});

또한, axios에서 interceptor를 없앨 수도 있습니다.

const myInterceptor = axios.interceptors.request.use(function ({/*...*/});
axios.interceptors.request.eject(myInterceptor);

모든 Request에 auth token header를 주입

Axios 인터셉터를 사용하면 이것을 한 번에 설정할 수 있으며, Axios 인스턴스를 호출하는 모든 곳에서 토큰을 지니고 있음을 확신할 수 있습니다.

axios.interceptors.request.use(req => {
  req.headers.authorization = ‘Bearer authToken’;
  return req;
});

const res = await axios.get(‘https://api.example.com’);

모든 Request와 Response에 Log를 삽입

로그는 유용합니다.

Axios 인터셉터를 사용하면 모든 요청과 응답을 빠르게 기록할 수 있습니다.

const axios = require(‘axios’);

axios.interceptors.request.use(req => {
  // 로그 남기기
  console.log(`${JSON.stringify(req, null, 10000000)}`);
  return req;
});

axios.interceptors.response.use(res => {
  // 로그 남기기
  console.log(res.data.json);
  return res;
});

await axios.post(‘https://example.com/‘);

에러 핸들링

Axios 인터셉터를 사용하여 최종 사용자에게 도달하기 전에 모든 오류를 캡처하고 개선할 수 있습니다. 

const axios = require(‘axios’);
axios.interceptors.response.use(
  res => res,
  err => {
    // 인터셉터를 사용해서 에러를 던진다
    throw new Error(err.response.data.message);
  }
)

// catch에서 에러로 던져진다
const err = await axios.get(‘http://example.com/errorPage’).catch(err => err);

인터셉터를 활용한 속도 제한

백엔드 리소스는 제한적이며 많은 비용이 소요될 수 있습니다. 

클라이언트에서 HTTP 호출을 속도 제한하여 서버의 부하를 줄일 수 있습니다. 

const axios = require(‘axios’);
const debounce = require('lodash.debounce');
axios.interceptors.request.use(
  res => {
    return new Promise((resolve) => {
       // 2초 마다 request가 호출
       debounce(
          () => resolve(config),2000);
       });
    });
  }
)

 

출처 : https://khaledgarbaya.net/articles/4-ways-to-use-axios-interceptors