TIL35-05 axios 심화 - instance와 interceptor

김태혁·2023년 2월 17일

2023.02.17 TIL 리액트

TIL

목록 보기

111/205

instance와 interceptor

1. axios interceptor의 개념과 필요성

axios interceptor는 이름에서 알 수 있듯, 다음 두 상황에서 흐름을 가로채서 여러분이 어떠한 코드 상의 관여를 할 수 있게 한다.
호출 서버 변경을 모두 해줘야 하는 상황이 발생한다면 엄청난 인적 리소스 낭비다.
- (1) 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전)
- (2) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전
이렇게 요청 및 응답시에 필요한 작업들을 한꺼번에 처리할 수 있다.
- 요청 헤더 추가
- 인증 관리
- 로그 관련 로직 삽입
- 에러 핸들링
위의 부분에서 빛을 발한다.

2. instance 만들기, baseURL 설정하기

custom 설정이 전혀 되어 있지 않은, axios를 인스턴스(instance)라고 한다.
scrc> axios >api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체다.
// https://axios-http.com/docs/req_config
// 위 주소를 참고하자!
const instance = axios.create({
	baseURL: "http://localhost:4000",
});

export default instance;

App.jsx

import "./App.css";
import { useEffect } from "react";
import api from "./axios/api";

function App() {
  useEffect(() => {
    api
      .get("/cafe")
      .then((res) => {
        console.log("결과 => ", res.data);
      })
      .catch((err) => {
        console.log("오류가 발생하였습니다!");
      });
  }, []);

  return <div>axios 예제입니다.</div>;
}

export default App;

서버가 변경이 되어도, api.js 파일만 수정해주면 된다.

3. request, response에 적용하기

scr > axios > api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    // 정상 응답
    return response;
  },

  function (error) {
    console.log("인터셉트 응답 못받았어요...ㅠㅠ");
    return Promise.reject(error);
  }
);

export default instance;