axios interceptor -> api 적용

REACT_APP_SERVER_URL=http://localhost:4000

⚠️ json-server 설정을 먼저 해주세요!

src > 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;

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;

// src > axios > api.js
//  request, response에 적용해보기

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;

- **실패 시켜보기**
    
    이번에는 instance의 설정을 변경시켜서 요청을 실패시켜볼거에요.
    
    ```jsx
    import axios from "axios";
    
    // axios.create의 입력값으로 들어가는 객체는 configuration 객체에요.
    // https://axios-http.com/docs/req_config
    // 위 주소를 참고해주세요!
    const instance = axios.create({
    	baseURL: "http://localhost:4000",
    	timeout: 1,
    });
    
    export default instance;
    ```
    
    이렇게 변경해주게 되면, 요청 타임아웃이 1ms(1 밀리세컨)