[강의평가사이트] 개발일지 - axios interceptors의 사용

API 사용을 단순화 하기 위해서 axios interceptors 를 사용하여 api를 모듈화하기로 

 

그리고 어제 조금이나마 구현을 했다.

 

기존에 사용하던 Api와 이후에 구현된 Api의 코드 길이가 차이가 많이 난다.

//공지사항 자세히보기 api
export const noticeDetailApi = async (notice) => {
    const url = `${PROXY_URL}/notice/?noticeId=${notice}`

    const options = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            AccessToken: getCookie("AccessToken")
        },
        url,
    }

    try {
        const response = await axios(options)
        return response.data
    } catch (e) {
        throw e
    }
}

위의 코드가 기존에 사용하던 코드인데, Api마다 계속 공통된 주소 넣어주고 헤더에 토큰 넣어주고,

응답,오류 처리하는게 비효율적이어서 개선시키게 되었다.

 

이제 어떻게 개선했는지 적어보도록 하겠다.

 

//ApiController.js

import axios from "axios"
import { Cookies } from "react-cookie"

const cookies = new Cookies()

const PROXY_URL = window.location.hostname === "localhost" ? "" : "/proxy"

const instance = axios.create({
    baseURL: `${PROXY_URL}`,
    timeout: 5000,
})

instance.interceptors.request.use(
    function (config) {
        //request 정상
        config.headers["Content-Type"] = "application/json"
        // 쿠키에 저장된 액세스토큰을 헤더에 넣어서 전송
        config.headers["AccessToken"] = cookies.get("AccessToken")
        console.log(config)

        return config
    },
    function (error) {
        //request 에러
        return Promise.reject(error)
    }
)

instance.interceptors.response.use(
    function (response) {
        //response 정상
        console.log(response)
        return response.data
    },
    function (error) {
        //response 에러
        console.log(error)

        return Promise.reject(error)
    }
)

export default instance

 

일단 ApiController라는 js파일을 한 개 만들어주고,

axios interceptors(인터셉터)를 이용하여 공통 요청함수와 응답함수를 만들었다.

대부분의 GET요청을 하는 api들이 이 ApiController를 통해 요청하기 때문에

위의 코드보다 훨씬 단축시킬 수 있었다.

 

//공지사항 자세히보기 api
export const noticeDetailApi = async (notice) => {
    return instance({
        url: `/notice/?noticeId=${notice}`,
        method: "GET",
    })
}

이 코드랑 개선 전의 코드랑 확실히 많이 차이가 나는 것 같다.

아마 더 개선시킬 수 있을 것 같다.

더 알아보고 좀 더 개선을 시켜야겠다.

 

다만 GET요청을 할 때는 대부분 응답 처리가 비슷해서, 저런 방식이 가능하지만

POST요청일 때는 각 요청마다 응답이나 오류 내용이 달라서 이걸 어떻게 처리할지가 문제이다.

이 부분도 좀 더 알아보고 개선시키게 되면 전체적으로 api들이 보기 좋아질 것 같다.