🌐비동기 통신 방법 - axios -part 2 (2024. 6. 13.)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 
학습주제 : React

학습내용 : axion 커스텀 인스턴스(Custom Instance), 인터셉터(interceptor)

학습일 : 2024. 6. 13.

<목차>
1. Axios Custom Instance 개념과 필요
2. Interceptor 적용하기

---

배운 내용 요약

1. Axios Custom Instance 개념과 필요

코드가 복잡하고 방대졌을 때를 가정해보자.

4,000줄이 넘는 코드, axios 여러 군데 흝어져 있을 때 만약 baseURL 주소나 헤더(Header)가 변경 된다면 모든 axios API를 일일이 손으로 바꿔줄 수 있을까? NOPE!

'Axios Custom Instance'를 활용하면 간단하게 해결할 수 있다.!

 

<비교>
순수한 Axiox

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

Axios Custom Instance

// 파일 경로: src/axios/인스턴트.jsx
const 인스턴트 = axios.create({
  baseURL: "http://localhost:4000",
});

//위 순수한 axios 코드로 적용하기
//파일 경로: src/app.jsx
const data = await 인스턴트.get("/")  //훨씬 간단해짐

(예시코드)

import "./App.css";
import { useEffect } from "react";
import 인스턴트 from "./axios/인스턴트";

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

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

export default App;

 

2. Interceptor 적용하기

• interceptor 문법 : request.use(요청) , response.use(응답)
• request, response 각각 2가지 인자를 받으며, 인자는 콜백함수도 받을 수 있음
• 2가지 인자? fullfill(성공), error(실패)의 경우를 말함

import axios from "axios";

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

export default 인스턴트;