[FE] Axios Interceptors

Axios Interceptors

인터셉터(Interceptors)는 요청(request)을 보내거나 응답(response)을 받기 전에 코드를 가로채서 원하는 작업을 수행하는 기능이다.
쉽게 말해, 모든 API 요청과 응답의 중간 관문 역할을 하는 함수라고 생각할 수 있다.
인터셉터는 크게 요청 인터셉터와 응답 인터셉터로 나뉜다.

Axios 인스턴스

특정 API 서버와 통신하기 위한 template을 만들어서 사용하는 것
인스턴스를 생성하면 이런 공통 설정을 미리 지정해두고, 필요할 때마다 간편하게 재사용할 수 있음

import axios from 'axios';

// 1. axios.create()를 호출하여 인스턴스를 생성
const api = axios.create({
  // 2. 이 안에 공통으로 사용할 옵션들을 설정
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 3. 다른 파일에서 재사용할 수 있도록 export
export default api;

하위 옵션

1. baseURL: API 요청의 기본 URL을 지정한다. 인스턴스를 사용한 모든 요청은 이 baseURL 뒤에 경로가 추가되어 전송된다.
2. headers: 모든 요청에 공통으로 포함될 HTTP 헤더를 설정한다.
3. timeout: 요청이 지정된 시간(밀리초, ms) 안에 응답을 받지 못하면 자동으로 요청 중단 후 에러를 발생시킨다. 서버가 응답이 없을 때 무한정 기다리는 것을 방지한다.
4. params: 모든 요청의 URL에 공통으로 추가될 쿼리 스트링(Query String) 설정한다.
5. withCredentials: 다른 도메인 간의 API 요청 시, 인증 정보(주로 쿠키)를 함께 보내도록 설정하는 옵션이다. 서버에서 세션 쿠키를 통해 사용자를 인증하는 방식일 때 반드시 true로 설정해야 한다.

요청 인터셉터

api.instance.interceptors.request.use

실행 시점: 요청(Request)을 보내기 전
주요 역할: 요청 설정(config) 수정, 공통 헤더 추가
첫 번째 인자: 성공적인 요청 설정(config)
두 번째 인자: 요청 실패 시의 에러(error)

// 요청 인터셉터 추가
api.interceptors.request.use(
  (config) => {
    // 요청을 보내기 전에 수행할 작업
    return config; // 수정된 설정(config)을 반환해야 요청이 계속 진행된다.
  },
  (error) => {
    // 요청 에러 처리
    console.error('요청 에러:', error);
    return Promise.reject(error);
  }
);

---

응답 인터셉터

api.instance.interceptors.response.use

실행 시점: 응답(response)을 받고 처리하기 전
주요 역할: 응답 데이터 가공, 공통 에러 처리
첫 번째 인자: 성공적인 응답(response)
두 번째 인자: 실패한 응답의 에러(error)

// 응답 인터셉터 추가
api.interceptors.response.use(
  (response) => {
    // 2xx 범위의 상태 코드는 이 함수를 트리거
    return response.data; // 실제 데이터만 반환하도록 가공
  },
  (error) => {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거
    return Promise.reject(error);
  }
);