TIL43-01 Axios Interceptor

Axios Interceptor

• Axios는 HTTP 클라이언트 라이브러리로서, 인터셉터(Interceptor) 기능을 제공한다. 인터셉터는 Axios 요청과 응답을 변환하거나 수정하는데 사용된다. Axios 인터셉터는 요청을 보내기 전과 응답을 받은 후에 실행할 수 있는 두 가지 유형의 인터셉터를 제공한다.

1. 요청 인터셉터는 요청을 보내기 전에 실행된다.
2. 요청 인터셉터는 주로 요청 헤더를 설정하거나 요청 바디를 수정하는데 사용된다.
3. 응답 인터셉터는 요청에 대한 응답을 받은 후에 실행된다.
4. 응답 인터셉터는 주로 응답 데이터를 변환하거나 오류를 처리하는 데 사용된다.

• 인터셉터를 사용하려면 Axios의 interceptors 속성을 사용하여 인터셉터를 등록해야 한다. 요청 인터셉터를 등록하는 방법은 다음과 같다.

import axios from 'axios';

axios.interceptors.request.use(
  function(config) {
    // 요청이 보내지기 전에 실행된다.
    // 요청을 수정할 수 있다.
    return config;
  },
  function(error) {
    // 요청이 실패한 경우 실행된다.
    return Promise.reject(error);
  }
);

• 위 코드에서 use() 함수의 첫 번째 매개변수는 요청을 수정할 때 실행될 함수다. 이 함수는 Axios 구성 객체(config)를 매개변수로 받아 수정된 구성 객체를 반환해야 한다. 이 함수가 반환한 구성 객체가 Axios 요청으로 전송된다. 두 번째 매개변수는 요청이 실패한 경우 실행될 함수다.

• 응답 인터셉터를 등록하는 방법은 다음과 같다.

import axios from 'axios';

axios.interceptors.response.use(
  function(response) {
    // 응답을 받은 후에 실행된다
    // 응답 데이터를 수정할 수 있다.
    return response;
  },
  function(error) {
    // 응답이 실패한 경우 실행된다.
    return Promise.reject(error);
  }
);

• 위 코드에서 use() 함수의 첫 번째 매개변수는 응답을 수정할 때 실행될 함수다. 이 함수는 Axios 응답 객체(response)를 매개변수로 받아 수정된 응답 객체를 반환해야 한다. 이 함수가 반환한 응답 객체가 Axios 응답으로 전송된다. 두 번째 매개변수는 응답이 실패한 경우 실행될 함수다.

인터셉터에서 Promise의 반환

• 인터셉터에서 Promise를 반환하는 것은 중요하다. Promise가 성공(resolve)한 경우에는 요청 또는 응답이 계속 진행된다.

• 인터셉터에서 Promise가 실패한 경우, 해당 요청 또는 응답이 오류 상태로 간주된다. 오류가 발생한 경우, 두 번째 매개변수로 전달한 함수가 실행된다.

• 인터셉터에서 반환된 Promise를 사용하여 비동기 작업을 수행할 수 있다.

• 예를 들어, 인터셉터에서 인증 토큰을 갱신하는 작업을 수행할 수 있다. 인증 토큰을 갱신하는 작업이 완료될 때까지 Promise를 반환하고, Promise가 성공하면 갱신된 인증 토큰을 사용하여 요청을 보내거나, Promise가 실패하면 요청이 실패한 것으로 처리할 수 있다.

• 다음은 요청 인터셉터에서 인증 토큰을 설정하는 예시 코드다.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

// 인증 토큰 설정
api.interceptors.request.use(
  function(config) {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

// 요청 보내기
api.get('/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

• 위 코드에서 api 객체는 Axios 인스턴스다. api 객체에 대한 요청을 보내기 전에 인증 토큰이 설정되는 요청 인터셉터를 등록한다. 이 인터셉터는 Axios 구성 객체(config)를 받아 Authorization 헤더에 인증 토큰을 설정한다.

• 그리고 api.get('/users')를 호출하여 요청을 보낸다. 이 때, Axios는 요청 인터셉터에서 설정된 Authorization 헤더를 포함하여 요청을 보낸다.

• 이와 같이 Axios의 인터셉터 기능을 사용하면 요청과 응답을 간편하게 변환하거나 수정할 수 있다.