instance와 interceptor

필요성

axios.get("http://localhost:3001/todos");
axios.post("http://localhost:3001/todos", todo);
axios.delete(`http://localhost:3001/todos/${todoId}`);

우리가 axios요청할때 이렇게 url넣고 요청 여러개 한다.
그럴때마다 복붙복붙 힘들다. 만약에 호출 300번했는데 호출서버 바뀌면 하나하나 바꾸기 귀찮으니까..
axios interceptor이용
인터셉터? => 가로챈다
흐름을 가로채서 어떠한 코드 상의 관여를 할 수 있게한다. 라는 의미
어떤 흐름이냐면
(1) 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전)
(2) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전
위의 두상황에서 흐름을 가로챈다.

요청 헤더 추가, 인증 관리, 로그 관련 로직 삽입, 에러 핸들링 부분에서 유용하다.
1. 인스턴스만들어서 baseURL설정

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;

api호출하는곳에다가 api를임포트해준다. (create해주면 api가생기나봄=baseURL)

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;

axios를 api으로 변경한다. axios가 인스턴스이다. 엑시오스를 가공해서 api로만든것.

그럼 흐름에 들어가서 관여해보자!

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});
//요청보내기전: 항상인자로 config받음
instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);
//응답보내기전:인자로 response받음
instance.interceptors.response.use(
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    // 정상 응답
    return response;
  },

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

export default instance;

그니까 axios.get 그니까 api.get 이런게 일어나는 중간에 실행된다는것이다(사이에서 내맘대로 로직핸들링)
대충 이런뜻같은데... ㅋㅋ잘모르겠당