[#24] api: useAxios hook

Happy-Dreaming · Apr 10, 2024 · e0d4b6f · e0d4b6f
1 parent b557c12
commit e0d4b6f
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 68 deletions.
diff --git a/app/hooks/useAxios.ts b/app/hooks/useAxios.ts
@@ -1,59 +1,67 @@
-import { useState, useEffect } from 'react';
-import { AxiosError, AxiosInstance } from 'axios';
-import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
-import { axiosInstance } from '../lib/api';
+import { useState, useEffect } from "react";
+import { AxiosError, AxiosInstance } from "axios";
+import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
+import { axiosInstance } from "../lib/api";
 
 const useAxios = <T>(
-  url: string,
-  method: 'get' | 'post' | 'delete' | 'patch',
-  requestBody?: any,
-  params?: AxiosRequestConfig
+    url: string,
+    method: "get" | "post" | "delete" | "patch",
+    requestBody?: any,
+    params?: AxiosRequestConfig
 ) => {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+    const [data, setData] = useState<T | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        let response: AxiosResponse<T>;
-        setLoading(true);
-        switch (method) {
-          case 'get':
-            response = await axiosInstance.get(url, params);
-            break;
-          case 'post':
-            response = await axiosInstance.post(url, requestBody, params);
-            break;
-          case 'delete':
-            response = await axiosInstance.delete(url, {
-              data: requestBody,
-              params,
-            });
-            break;
-          case 'patch':
-            response = await axiosInstance.patch(url, requestBody, params);
-            break;
-        }
-        setData(response.data);
-        setLoading(false);
-      } catch (e) {
-        setError('네트워크 요청에 실패했어요');
-        if (e instanceof AxiosError) {
-          setError(e.message);
-        }
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                let response: AxiosResponse<T>;
+                setLoading(true);
+                switch (method) {
+                    case "get":
+                        response = await axiosInstance.get(url, params);
+                        break;
+                    case "post":
+                        response = await axiosInstance.post(
+                            url,
+                            requestBody,
+                            params
+                        );
+                        break;
+                    case "delete":
+                        response = await axiosInstance.delete(url, {
+                            data: requestBody,
+                            params,
+                        });
+                        break;
+                    case "patch":
+                        response = await axiosInstance.patch(
+                            url,
+                            requestBody,
+                            params
+                        );
+                        break;
+                }
+                setData(response.data);
+                setLoading(false);
+            } catch (e) {
+                setError("네트워크 요청에 실패했어요");
+                if (e instanceof AxiosError) {
+                    setError(e.message);
+                }
 
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, [url, method, requestBody]);
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, []);
 
-  return {
-    data,
-    loading,
-    error,
-  };
+    return {
+        data,
+        loading,
+        error,
+    };
 };
 
 export { useAxios };
diff --git a/app/lib/api.ts b/app/lib/api.ts
@@ -1,28 +1,28 @@
-import axios, { AxiosError, AxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosRequestConfig } from "axios";
 
 export const axiosInstance = axios.create({
-  baseURL: `${process.env.NEXTAUTH_URL}`,
-  withCredentials: true,
-  timeout: 3000,
+    baseURL: `http://localhost:3000`,
+    withCredentials: true,
+    timeout: 3000,
 });
 
 const handleTokenError = async (err: AxiosError) => {
-  try {
-    await fetch('/api/refresh_token');
-    return axiosInstance.request(err.config as AxiosRequestConfig<any>);
-  } catch (e) {
-    return Promise.reject(err);
-  }
+    try {
+        await fetch("/api/refresh_token");
+        return axiosInstance.request(err.config as AxiosRequestConfig<any>);
+    } catch (e) {
+        return Promise.reject(err);
+    }
 };
 
 axiosInstance.interceptors.response.use(
-  (res) => {
-    return res;
-  },
-  (error: AxiosError) => {
-    if (error.response && error.response.status === 401) {
-      return handleTokenError(error);
+    (res) => {
+        return res;
+    },
+    (error: AxiosError) => {
+        if (error.response && error.response.status === 401) {
+            return handleTokenError(error);
+        }
+        return Promise.reject(error);
     }
-    return Promise.reject(error);
-  }
 );