[TIL] axios 모듈화하기 with Typescript

 

모듈화 하는 이유?

코드량이 많아질 수록 중복되는 코드가 많아져서 유지보수가 힘들어지고 개발 편의성이 떨어짐

 

how?

리액트 프로젝트일 경우 src 안에 api폴더를 생성, core.ts 파일을 생성한다

이곳에 인스턴스를 위한 객체를 선언하고 다른 파일에서 import하여 사용한다

src/api/core.ts

import axios, { AxiosInstance } from "axios"
export const api: AxiosInstance = axios.create({
		baseURL: "/api",
    timeout: 500000,
})

 

인터셉터라는 것을 사용하면 에러 처리나 res = res.data와 같은 동작을 미리 적용할 수 있다

 

인터셉터

네트워크 요청, 응답을 가로채어 처리하거나 수정하는데 사용

HTTP클라이언트에서 주로 사용, 요청이 서버로 가기 전 or 응답이 클라이언트로 돌아오기 전 동작 수행

⇒ 주로 HTTP요청에서 결과물을 가로채는 애.

 

미들웨어

애플리케이션의 요청-응답 사이클 중간에 위치하여 요청이 처리되기 전이나 후에 작업을 수행

서버사이드 런타임에 사용. Express.js

⇒ 애플리케이션 사이 통신을 가능하게 하는 소프트웨어. 중간 매개 역할

redux-saga는 비동기 작업을 중간에서 관리하기 때문에 미들웨어 역할임

 

공통점: 네트워크 요청, 데이터 흐름, 상태제어에 사용됨. 라이브러리에 따라 의미가 달라질 수 있음

 

core.js 하단에 이어서 작성

// 요청 전에 실행되는 인터셉터
api.interceptors.request.use(
  (config) => {
    // 요청을 보내기 전에 수행할 작업 추가
    return config;
  },
  (error) => {
    // 요청 에러 처리
    return Promise.reject(error);
  }
);
// 응답을 받기 전에 실행되는 인터셉터
api.interceptors.response.use(
(response) => {
    // 응답 데이터를 가공하여 반환
    return response.data;
  },
  (error) => {
    // 응답 에러 처리
    return Promise.reject(error);
  }
);

 

 

계획을 불러오는 plan.ts 생성

src/api/plan.ts

import { api } from "./core"
import { planData } from "interface/datas/plan"

export async function fetchPlan() {
    return api.get("/plan").then()
}

export async function createPlan(data: planData) {
    return api.post("myplan", data).then()
}

 

컴포넌트에서 사용

src/Plans.ts

import { createPlan } from "@/api/plan";

// 생략

const handleSubmit = (formData: FormData) => {
    createPlan({
        ...formData,
        todo: something,
    }).then(() => {
        // 동작
    })
}

// 생략

 

 

하위 api에도 baseURL을 쓸 필요가 없어졌고

컴포넌트에서도 간단하게 사용할 수 있게 되었다

.then() 안에 setState를 사용하거나 saga에서 const plan = yield fetchPlan()과 같이 사용이 가능하다