Next js (넥스트 js) - axios Interceptor(인터셉터)

​

코드 최적화를 위한

API 인터셉터에 대해서

포스팅 하고자 한다.

​

---

API 의 인터셉터 (interceptor) 란

• APi를 사용할 때 요청이나 응답을 가로채서
• 중간에서 사전 처리를 할 수 있게 해주는 것

​

​

API 인터셉터가 사용 되는 곳

• 공통 헤더 추가 : 일일이 모든 api 마다 header값을 추가하기 보다, interceptor를 통해 한 번 선언 후 , 그 다음부터는 header 추가를 안해도 됨.
• 로그 : 요청 ,응답시 데이터를 log로 찍어내서 확인하기 위함.
• 에러 처리 : 에러 발생시 공통 에러 처리를 하기 위함
• 데이터 변환 : 서버로 보내기 전 데이터 포맷을 변경하거나 서버에서 받은 데이터를 특정 형식으로 변환할 떄 사용.

​

​

동작 방식

1) Axios 인터셉터 파일 생성 (파일 위치는 편한 곳 or 폴더 스트럭처에 따라 생성)

​

​

EX 1)

 

 

import axios from 'axios';

// 요청 인터셉터 추가
axios.interceptors.request.use(
  (config) => {
    // 요청을 보내기 전에 인증 토큰 추가
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  (error) => {
    // 요청 오류 처리
    return Promise.reject(error);
  }
);

// 응답 인터셉터 추가
axios.interceptors.response.use(
  (response) => {
    // 응답 데이터 처리
    return response;
  },
  (error) => {
    // 에러 처리 로직 추가
    return Promise.reject(error);
  }
);

 

 

EX 2) header 값 인터셉터

 

import axios from "axios";

// Axios Interceptor 설정
axios.interceptors.request.use(
  (config) => {
    const token = token // 토큰 
    const type = type // 타입

    if (token && type) {
      config.headers["token"] = token;
      config.headers["type"] = type;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

 

 

2) 최초 로드 시점에서 interceptor 설정. (보통 app.jsx app.ts .app.js)

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

// Interceptor를 한 번만 설정하면 됩니다.
import "./api/axiosInterceptor";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

 

3) axios 그대로 사용

​

​

​

여기까지 api interceptor에 대해

포스팅 하였습니다.

​

​

도움이 되셨다면

댓글과 좋아요 부탁드립니다 .