💡axios

• HTTP 요청을 보낼 때 매우 유용한 JS라이브러리
• API와의 통신을 간단하고 직관적으로 처리
• axios.create 메서드를 사용해 기본 설정이 포함된 인스턴스를 생성
  • 이 인스턴스를 통해 공통 설정을 재사용하고, 요청과 응답을 전역적으로 처리하는 interceptors를 쉽게 관리할 수 있다.

import axios from 'axios';

export const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 1000 * 60 * 3,
  headers: { "Content-Type": "application/json" },
  withCredentials: true, // 인증정보(쿠키,인증 header)를 포함시킬지 여부
});

➡️interceptors

• 요청이 서버로 전송되기 전이나 응답을 받은 후에 특정 코드를 실행할 수 있게 해주는 기능

즉, 모든 요청이나 응답을 중간에 가로채어 추가 로직을 실행할 수 있게 해줌

요청, 응답을 받을 때 인가인증을 위해 해줘야하는 것들

• 요청 시 header에 accessToken 담아서 보내주기
• accessToken이 만료면 refreshToken을 이용해 재발급 후 재요청

요청 인터셉터

axiosInstance.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        console.log(error);
        return Promise.reject(error);
    },
);

• config : Axios 요청 구성 설정을 담고있다.
• request 구성 또는 헤더를 수정하고, 인증 토큰 등 추가하고, 서버에 요청을 보내기 전에 다른 작업을 수행할 수 있다.

응답 인터셉터

axiosInstance.interceptors.response.use(
    (config) => {
        return config;
    },
    (error) => {
        return Promise.reject(error);
    },
);

• response가 호출코드로 다시 전달되기 전에 response 데이터를 수정하거나, 오류처리, 정보기록 등 작업 수행
• ex) if(statuscode === '401') { 토큰 만료일 시}

apiClient 함수

post

• url로 데이터를 post 요청으로 보내는 비동기 함수

export const apiClient = async (url: string, data: any) => {
    return await axiosInstance
        .post(url, data)
        .then((res) => {
            if (res.status === 200) {
                return res;
            } else {
                return undefined;
            }
        })
        .catch((e) => {
            console.error(e);
        });
};

➡️ 사용 예시

const res = await apiPostClient('url',data);

get

• url 로 get 요청을 수행, 응답이 올 때까지 기다림

export const apiGetClient = async (url: string): Promise<any> => {
    return await axiosInstance
        .get(url)
        .then((res) => {
            if (res.status === 200) {
                return res;
            } else {
                return undefined;
            }
        })
        .catch((e) => {
            console.error(e);
        });
};

➡️ 사용 예시

const project = async () => {
        const res = await apiGetClient('url'
        if (res) {
            if (res.status === 200) {
              const data: any = res.data.data
              setData(data)
            }
        }
    };