Axios instance 생성하기 (API 모듈화)

API 모듈화

/ src / api / todoAxio.js

import Axios from "axios";
const axiosInstance = Axios.create({
  baseURL: process.env.REACT_APP_TODO,
  timeout: 5000,
});

Axios.create 로 생성한다.

api를 불러올 url 주소는 노출방지를 위해서 .env 환경변수로 저장해서 넣어주었다.

 

 

Axios interceptors

 

생성한 인스턴스를 인터셉터해서 처리되도록 한다. 

//요청 인터셉터
axiosInstance.interceptors.request.use(
  (config) => {
    //요청 보내기 전에 수행 로직
    return config;
  },
  (err) => {
    //요청 에러 시 수행 로직
    return Promise.reject(err);
  }
);

//응답 인터셉터
axiosInstance.interceptors.response.use(
  (response) => {
    //응답에 대한 로직
    const res = response.data;
    return res;
  },
  (err) => {
    return Promise.reject(err);
  }
);
export default axiosInstance;

interceptors 는 then 이랑 catch로 처리되기 전, 요청(request) 또는 응답(response)을 가로 챌 수 있다.

 

 

/ src / pages / AxiosUse.jsx

import { useState, useEffect } from "react";
import axiosInstance from "../api/todoAxios";
import axios from "axios";

const AxiosUse = () => {
  const [todoTitle, setTodoTitle] = useState([]);

  function todoApi() {
    axiosInstance
      .get()
      .then((res) => setTodoTitle(res))
      .catch((err) => console.log(err));
  }

  useEffect(() => {
    todoApi();
  }, []);

  return (
    <div>
      <ul>
        {todoTitle.map((item) => {
          return (
            <li key={item.id}>
              <h2>{item.title}</h2>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default AxiosUse;

aixos를 이용해 생성한 api모듈을 (api / todoAxio.js) import 해서 사용한다.

interceptors.response 로 response을 then 전에 가로채서 .data 값을 return 되게 해놨기때문에

모듈을 가져다 쓸때 then에서 response는 이미 data값을 받고있어서 .data를 적을 필요가 없어졌다.

 

 

axios 사용법 참조링크

https://axios-http.com/kr/docs/intro