init

src/utils/axios/config.ts

@@ -0,0 +1,149 @@
+import axios from 'axios';
+import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
+
+// 请求参数类型
+export type RequestParams = Record<string, string | number | boolean | null | undefined | string[]>;
+
+// 创建axios实例
+const instance: AxiosInstance = axios.create({
+  baseURL: process.env.VITE_API_BASE_URL,
+  timeout: 15000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 请求拦截器
+instance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // 从localStorage获取token
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const { data } = response;
+    // 这里可以根据后端的数据结构进行调整
+    if (data.code === 200 || data.code === 0) {
+      return data.data;
+    }
+    return Promise.reject(new Error(data.message || '请求失败'));
+  },
+  (error: AxiosError) => {
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          // 未授权，清除token并跳转到登录页
+          localStorage.removeItem('token');
+          window.location.href = '/login';
+          break;
+        case 403:
+          // 权限不足
+          console.error('没有权限访问该资源');
+          break;
+        case 404:
+          console.error('请求的资源不存在');
+          break;
+        case 500:
+          console.error('服务器错误');
+          break;
+        default:
+          console.error('未知错误');
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+// 通用的 API 请求方法
+export const Api = {
+  /**
+   * GET请求
+   * @param url - 请求地址
+   * @param params - 请求参数
+   * @param config - axios配置
+   */
+  async get<T>(url: string, params?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
+    return instance.get(url, { params, ...config });
+  },
+
+  /**
+   * POST请求
+   * @param url - 请求地址
+   * @param data - 请求数据
+   * @param config - axios配置
+   */
+  async post<T>(url: string, data?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
+    return instance.post(url, data, config);
+  },
+
+  /**
+   * PUT请求
+   * @param url - 请求地址
+   * @param data - 请求数据
+   * @param config - axios配置
+   */
+  async put<T>(url: string, data?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
+    return instance.put(url, data, config);
+  },
+
+  /**
+   * DELETE请求
+   * @param url - 请求地址
+   * @param config - axios配置
+   */
+  async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return instance.delete(url, config);
+  },
+
+  /**
+   * 上传文件
+   * @param url - 请求地址
+   * @param file - 文件
+   * @param config - axios配置
+   */
+  async upload<T>(url: string, file: File, config?: AxiosRequestConfig): Promise<T> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return instance.post(url, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      ...config,
+    });
+  },
+
+  /**
+   * 下载文件
+   * @param url - 请求地址
+   * @param filename - 文件名
+   * @param config - axios配置
+   */
+  async download(url: string, filename?: string, config?: AxiosRequestConfig): Promise<void> {
+    const response = await instance.get(url, {
+      responseType: 'blob',
+      ...config,
+    });
+
+    const blob = new Blob([response.data]);
+    const downloadUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.download = filename || 'download';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(downloadUrl);
+  },
+};
+
+export default instance;