2월 24일 여정 27일차이다.

오늘은 Axios instance와 interceptor에 대해 알아보고자 한다.

오늘의 Today I Learned

const data = axios.get("http://localhost:4000/");

우리가 흔히들 쓰는 방법은 바로 위와 같은 방법이다.
순수 axios를 써왔지만 이번에는 다른 방법을 사용해보고자 한다.

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;

바로 위와 같은 방법이 axios instance를 생성하는 방법이다.

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정보가 수정되어도 api.js만 수정해주면 된다.

그럼 interceptors에 대해 한번 알아보자.

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);
  }
);

위 코드를 보면 interceptor가 중간에 응답을 가로채서 어떤 작업을 수행시키는 것을
볼 수 있다.

마지막으로

오늘부터 백엔드와 팀프로잭트에 들어갔다. 너무 떨린다.