axios 사용성 개선하기 | 신상호의 기술 블로그

axios는 http 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. 인터셉터, 타임아웃 등 편리한 기능들을 제공해주기 때문에 많은 프로젝트에서 사용되고 있습니다. 저도 axios를 많은 프로젝트에서 활용하고 있는데요, axios를 사용할 때 생기는 몇 가지 문제점을 간단하게 개선할 수 있는 방법을 정리해보려고 합니다.

제가 axios를 직접 사용해보며 겪은 문제점은 다음과 같습니다.

response data의 타입이 any로 추론됩니다.
data를 참조하기 위한 중복 코드가 지속적으로 발생합니다.

이런 문제들을 해결하기 위해 axios의 메소드들을 래핑하는 유틸리티 함수를 만들어 활용해볼 수 있습니다.

1const apiClient = axios.create({
2  baseUrl: "/api",
3});
4
5const api = {
6  get: async <TResponse = unknown>(
7    ...args: Parameters<AxiosInstance["get"]>
8  ) => {
9    const response = await apiClient.get<TResponse>(...args);
10    return response.data;
11  },
12  post: async <TResponse = unknown>(
13    ...args: Parameters<AxiosInstance["post"]>
14  ) => {
15    const response = await apiClient.post<TResponse>(...args);
16    return response.data;
17  },
18  put: async <TResponse = unknown>(
19    ...args: Parameters<AxiosInstance["put"]>
20  ) => {
21    const response = await apiClient.put<TResponse>(...args);
22    return response.data;
23  },
24  patch: async <TResponse = unknown>(
25    ...args: Parameters<AxiosInstance["patch"]>
26  ) => {
27    const response = await apiClient.patch<TResponse>(...args);
28    return response.data;
29  },
30  postForm: async <TResponse = unknown>(
31    ...args: Parameters<AxiosInstance["postForm"]>
32  ) => {
33    const response = await apiClient.postForm<TResponse>(...args);
34    return response.data;
35  },
36  patchForm: async <TResponse = unknown>(
37    ...args: Parameters<AxiosInstance["patchForm"]>
38  ) => {
39    const response = await apiClient.patchForm<TResponse>(...args);
40    return response.data;
41  },
42  delete: async <TResponse = unknown>(
43    ...args: Parameters<AxiosInstance["delete"]>
44  ) => {
45    const response = await apiClient.delete<TResponse>(...args);
46    return response.data;
47  },
48};

무엇을 하는 코드인가요?

axios의 메소드들이 기본적으로 any를 리턴하는 부분을 unknown으로 개선해줍니다.
data를 참조하는 중복 코드를 완화해줍니다.

1// 개선 전
2export const postApi = {
3  getPosts: async () => {
4    const response = await api.get("/posts");
5    return response.data; // Promise<any>
6  },
7};
8
9// 개선 후
10export const postApi = {
11  getPosts: () => api.get("/posts"), // Promise<unknown>
12};