Kaynağa Gözat

refactor(utils): 优化请求工具和错误处理

- 移除不必要的 console.log 语句
- 改进错误信息显示,使用 data?.msg 提供更具体的错误描述
- 优化文件下载时的响应处理
nahida 10 ay önce
ebeveyn
işleme
581b5b51b5
1 değiştirilmiş dosya ile 41 ekleme ve 35 silme
  1. 41 35
      src/utils/request.ts

+ 41 - 35
src/utils/request.ts

@@ -3,9 +3,9 @@ import axios, {
   type AxiosInstance,
   type AxiosRequestConfig,
   type AxiosResponse,
-  type InternalAxiosRequestConfig
+  type InternalAxiosRequestConfig,
 } from 'axios'
-import { ElMessage } from 'element-plus'; // 导入 Element Plus 的 ElMessage 组件
+import { ElMessage } from 'element-plus' // 导入 Element Plus 的 ElMessage 组件
 
 const instance: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API, // 从环境变量中获取基础 URL
@@ -13,71 +13,75 @@ const instance: AxiosInstance = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-});
+})
 
 instance.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     // 可以在这里添加通用的请求头
-    return config;
+    return config
   },
-  (error:AxiosError) => {
-    return Promise.reject(error);
-  }
-);
+  (error: AxiosError) => {
+    return Promise.reject(error)
+  },
+)
 
 // 响应拦截器
 instance.interceptors.response.use(
   (response: AxiosResponse) => {
-    console.log(response)
-    return response.data; // 返回响应数据
+    // console.log(response)
+    return response.data // 返回响应数据
   },
-  (error:AxiosError) => {
+  (error: AxiosError) => {
     // 处理错误
     if (error.response) {
       // 服务器返回了错误状态码
-      const { status, data } = error.response;
-      ElMessage.error(`请求失败,状态码: ${status},错误信息: ${data}`);
-      return Promise.reject(data);
+      const { status, data } = error.response
+      ElMessage.error(`请求失败,状态码: ${status},错误信息: ${data?.msg || '未知错误'}`)
+      return Promise.reject(data)
     } else if (error.request) {
       // 请求已发出,但没有收到响应
-      ElMessage.error('请求已发出,但没有收到响应');
-      return Promise.reject({ message: 'No response received' });
+      ElMessage.error('请求已发出,但没有收到响应')
+      return Promise.reject({ message: 'No response received' })
     } else {
       // 发生了其他错误
-      ElMessage.error(`发生错误: ${error.message}`);
-      return Promise.reject({ message: error.message });
+      ElMessage.error(`发生错误: ${error.message}`)
+      return Promise.reject({ message: error.message })
     }
-  }
-);
+  },
+)
 export const clientGet = <T, R>(url: string, config?: AxiosRequestConfig) =>
-  instance.get<T, R>(url, config);
+  instance.get<T, R>(url, config)
 
-export const clientPost = <T,R>(url: string, data?: T, config?: AxiosRequestConfig) =>
-  instance.post<T,R>(url, data, config);
+export const clientPost = <T, R>(url: string, data?: T, config?: AxiosRequestConfig) =>
+  instance.post<T, R>(url, data, config)
 
-export const clientPut = <T,R>(url: string, data?: T, config?: AxiosRequestConfig) =>
-  instance.put<T,R>(url, data, config);
+export const clientPut = <T, R>(url: string, data?: T, config?: AxiosRequestConfig) =>
+  instance.put<T, R>(url, data, config)
 
-export const clientDel = <T,R>(url: string, config?: AxiosRequestConfig) =>
-  instance.delete<T,R>(url, config);
+export const clientDel = <T, R>(url: string, config?: AxiosRequestConfig) =>
+  instance.delete<T, R>(url, config)
 
 // 新增:专门用于发送 FormData 的 POST 请求
-export const clientPostFormData = <T, R>(url: string, data: T, config?: AxiosRequestConfig): Promise<R> =>
+export const clientPostFormData = <T, R>(
+  url: string,
+  data: T,
+  config?: AxiosRequestConfig,
+): Promise<R> =>
   instance.post<T, R>(url, data, {
     ...config,
     headers: {
       'Content-Type': 'multipart/form-data', // 明确设置为 multipart/form-data
     },
-  });
+  })
 
-export const clientDownloadExcel = async (url:string,config?:AxiosRequestConfig) =>{
-  const res = await axios.get(import.meta.env.VITE_APP_BASE_API+url, {
+export const clientDownloadExcel = async (url: string, config?: AxiosRequestConfig) => {
+  const res = await axios.get(import.meta.env.VITE_APP_BASE_API + url, {
     responseType: 'blob',
-    ...config
+    ...config,
   })
   const contentDisposition = res.headers['content-disposition']
-  const disposition = decodeURIComponent(contentDisposition);
-  console.log(res)
+  const disposition = decodeURIComponent(contentDisposition)
+  // console.log(res)
   let filename = new Date().getTime() + '.xlsx'
 
   if (disposition) {
@@ -86,7 +90,9 @@ export const clientDownloadExcel = async (url:string,config?:AxiosRequestConfig)
       filename = fileNameMatch[1]
     }
   }
-  const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+  const blob = new Blob([res.data], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  })
   const downloadUrl = window.URL.createObjectURL(blob)
   const link = document.createElement('a')
   link.href = downloadUrl