移除fetch，使用axios

packages/@bkui/template-open-vue3-ts/src/http/api.ts

@@ -1,5 +1,14 @@
-import fetch from './fetch';
+import http from './request';
+
+interface User {
+  username: string;
+  avatar_url: string;
+}
 
 const apiPrefix = 'api';
 
-export const getUser = () => fetch.get(`${apiPrefix}/user`);
+export const getUser = () => http.get<User>(`${apiPrefix}/user`, {
+  params: {
+    username: 'test',
+  },
+});

packages/@bkui/template-open-vue3-ts/src/http/request/cancel.ts

@@ -0,0 +1,56 @@
+import type { IRequestConfig } from './index';
+
+export class RequestCanceler {
+  private abortControllerMap: Map<string, AbortController>;
+
+  constructor() {
+    this.abortControllerMap = new Map();
+  }
+
+  // 添加请求
+  addRequest(config: IRequestConfig) {
+    const requestKey = this.getRequestKey(config);
+    this.removeRequest(requestKey);
+
+    const controller = new AbortController();
+
+    const newConfig = {
+      ...config,
+      signal: controller.signal,
+    };
+
+    this.abortControllerMap.set(requestKey, controller);
+    return newConfig;
+  }
+
+  // 移除请求
+  removeRequest(requestKey: string) {
+    if (this.abortControllerMap.has(requestKey)) {
+      const controller = this.abortControllerMap.get(requestKey);
+      if (controller && !controller.signal.aborted) {
+        controller.abort();
+      }
+      this.abortControllerMap.delete(requestKey);
+    }
+  }
+
+  // 取消所有请求
+  cancelAllRequest() {
+    this.abortControllerMap.forEach((controller) => {
+      controller.abort();
+    });
+    this.abortControllerMap.clear();
+  }
+
+  // 重置
+  reset() {
+    this.abortControllerMap.clear();
+  }
+
+  // 生成唯一请求标识
+  getRequestKey(config: IRequestConfig): string {
+    return `${config.method}-${config.url}-${JSON.stringify(config.params)}-${JSON.stringify(config.data)}`;
+  }
+}
+
+export default new RequestCanceler();

packages/@bkui/template-open-vue3-ts/src/http/request/index.ts

@@ -0,0 +1,76 @@
+import axios, {
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type CustomParamsSerializer,
+} from 'axios';
+import { stringify } from 'qs';
+
+import requestInterceptor from './request';
+import responseInterceptor from './response';
+
+export interface IRequestConfig extends AxiosRequestConfig {
+  globalError?: boolean;
+}
+interface IRequestResponseResult<T> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+interface HttpWithoutData {
+  get: <T = unknown>(url: string, config?: IRequestConfig) => Promise<IRequestResponseResult<T>>;
+  head: <T = unknown>(url: string, config?: IRequestConfig) => Promise<IRequestResponseResult<T>>;
+  options: <T = unknown>(url: string, config?: IRequestConfig) => Promise<IRequestResponseResult<T>>;
+  delete: <T = unknown>(url: string, config?: IRequestConfig) => Promise<IRequestResponseResult<T>>;
+}
+interface HttpWithData {
+  post: <T = unknown, D = unknown>(
+    url: string,
+    data?: D,
+    config?: IRequestConfig,
+  ) => Promise<IRequestResponseResult<T>>;
+  put: <T = unknown, D = unknown>(
+    url: string,
+    data?: D,
+    config?: IRequestConfig,
+  ) => Promise<IRequestResponseResult<T>>;
+  patch: <T = unknown, D = unknown>(
+    url: string,
+    data?: D,
+    config?: IRequestConfig,
+  ) => Promise<IRequestResponseResult<T>>;
+}
+
+interface IHttp extends HttpWithoutData, HttpWithData {}
+
+const defaultConfig: IRequestConfig = {
+  timeout: 10000,
+  headers: {},
+  withCredentials: true,
+  paramsSerializer: {
+    serialize: stringify as unknown as CustomParamsSerializer,
+  },
+};
+
+// 创建 axios 实例
+const axiosInstance: AxiosInstance = axios.create(defaultConfig);
+
+// 添加响应拦截器
+responseInterceptor(axiosInstance.interceptors.response);
+requestInterceptor(axiosInstance.interceptors.request);
+
+const requestData = <T, D = unknown>(cfg: AxiosRequestConfig<D>) => axiosInstance
+  .request<IRequestResponseResult<T>, IRequestResponseResult<T>, D>(cfg);
+
+// 构建 http 方法
+const http: IHttp = {
+  get: <T = unknown>(url: string, config: IRequestConfig = {}) => requestData<T>({ method: 'get', url, ...config }),
+  head: <T = unknown>(url: string, config: IRequestConfig = {}) => requestData<T>({ method: 'head', url, ...config }),
+  options: <T = unknown>(url: string, config: IRequestConfig = {}) => requestData<T>({ method: 'options', url, ...config }),
+  delete: <T = unknown>(url: string, config: IRequestConfig = {}) => requestData<T>({ method: 'delete', url, ...config }),
+  post: <T = unknown, D = unknown>(url: string, data?: D, config: IRequestConfig = {}) => requestData<T, D>({ method: 'post', url, data, ...config }),
+  put: <T = unknown, D = unknown>(url: string, data?: D, config: IRequestConfig = {}) => requestData<T, D>({ method: 'put', url, data, ...config }),
+  patch: <T = unknown, D = unknown>(url: string, data?: D, config: IRequestConfig = {}) => requestData<T, D>({ method: 'patch', url, data, ...config }),
+};
+
+export default http;

packages/@bkui/template-open-vue3-ts/src/http/fetch/request-error.ts → packages/@bkui/template-open-vue3-ts/src/http/request/request-error.ts

@@ -1,8 +1,8 @@
 export default class RequestError extends Error {
   public code: number;
   public message: string;
-  public response: any;
-  constructor(code: number, message: string, response?: any) {
+  public response: unknown;
+  constructor(code: number, message: string, response?: unknown) {
     super();
     this.code = code;
     this.message = message;

packages/@bkui/template-open-vue3-ts/src/http/request/request.ts

@@ -0,0 +1,13 @@
+import type {
+  AxiosInterceptorManager,
+  InternalAxiosRequestConfig,
+} from 'axios';
+
+import requestCanceler from './cancel'; // 引入请求取消器
+
+export default (interceptors: AxiosInterceptorManager<InternalAxiosRequestConfig>) => {
+  interceptors.use((request) => {
+    // 使用返回的新配置
+    return requestCanceler.addRequest(request) as InternalAxiosRequestConfig;
+  }, undefined);
+};