항해 27일차 (axios 심화)

항해 27일차

오늘은 어제 공부했던 axios의 심화부분에 대해서 공부하였다.

심화부분에서는 instance와 interceptor가 나온다. 그래서 오늘은 axios의 심화부분에 대해서 TIL를 적을려고 한다.

interceptor

get, post, delete 등 axios를 활용하여 Http 통신을 하였는데 이 부분에서 호출하는 부분이 많을 경우 수정하는 데에 있어서 리소스 낭비가 생기기 때문에 interceptor를 사용한다. Axios 인스턴스를 생성하면, 해당 인스턴스에서 사용할 기본 설정을 정의할 수 있다. 예를 들어, baseURL, headers, timeout 등을 미리 정의하여 인스턴스를 생성할 때마다 반복적으로 설정을 할 필요 없이 간편하게 사용할 수 있다.인터셉터는 Axios에서 제공하는 기능 중 하나로, HTTP 요청과 응답을 중간에서 가로채서 수정할 수 있다. Axios에서는 request와 response에 대해 인터셉터를 지원하며, 각각 axios.interceptors.request와 axios.interceptors.response를 통해 정의할 수 있다.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response) {
      // handle error response
    } else if (error.request) {
      // handle error request
    } else {
      // handle other errors
    }
    return Promise.reject(error);
  }
);

export default api;

코드에서는 Axios 인스턴스를 생성하고, baseURL, timeout, headers 등을 설정한다. 이후, request 인터셉터와 response 인터셉터를 각각 정의하고, 요청/응답에 대한 처리를 수행한다.

request 인터셉터에서는 요청에 대한 공통적인 처리를 수행하기 위해, HTTP 요청 헤더에 Authorization 토큰을 추가하는 작업을 수행한다.

response 인터셉터에서는 응답에 대한 공통적인 처리를 수행하기 위해, 성공적인 응답일 경우 response.data를 반환하고, 에러 응답일 경우 각각에 맞는 처리를 수행한다. 이를 통해, 모든 HTTP 요청에 대해 공통적인 처리를 수행할 수 있다.