vue3+ts 简单封装axios：实现错误重试、重复请求取消、手动取消

注意：需要安装crypto-js库

1. 在utils\request.ts中：

   import axios from "axios";
   import type { InternalAxiosRequestConfig, AxiosResponse, AxiosInstance } from "axios";
   import { useRequeryStore } from "@/store/request";
   const useRequeryStoreInfo = useRequeryStore();let isLogoutShowing = false; // 登录过期弹窗锁// 创建Axios实例
   const axiosInstance: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_BASE_URL,timeout: 60000 // 延时时间：60s
   });// 请求拦截器
   axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 添加tokenlet token = useRequeryStoreInfo.getToken;if (token) config.headers["Authorization"] = "Bearer " + token;const key = useRequeryStoreInfo.getRequestKey(config);// 移除旧的请求useRequeryStoreInfo.removeOldRequest(key);// 开始新的请求const controller = new AbortController();config.signal = controller.signal;useRequeryStoreInfo.setRequest(key, controller);return config;},(error) => {return Promise.reject(error);}
   );// 响应拦截器
   axiosInstance.interceptors.response.use((response: AxiosResponse) => {// 移除完成的请求useRequeryStoreInfo.removeNewRequest(response.config);// 错误处理if (response.data.code != 200) {responseError(response.data.code, response.data.message);return Promise.reject(response.data);}let config = response.config;console.log(`%c${config.baseURL}${config.url} %c${config.method?.toUpperCase()}`, "color:#409EFF; font-weight:bold;", "color:#67C23A; font-weight:bold;");console.log("- 请求参数", config.data, config.params);console.log("- 响应结果", response.data);return Promise.resolve(response.data);},async (error) => {let config = error.config;// 移除完成的请求、不包括主动取消if (error.code !== "ERR_CANCELED" && config) useRequeryStoreInfo.removeNewRequest(error.config);// 错误重试if (config.errorRetry) {const retryTotal: number = config.retryTotal ?? 3;const retryCount: number = config.retryCount ?? 0;if (retryCount < retryTotal) {ElMessage.warning(`请求失败，正在进行第${retryCount + 1}次尝试重新请求...`);config.retryCount = retryCount + 1;await new Promise((resolve) => setTimeout(resolve, 1000));const newController = new AbortController();config.signal = newController.signal;return axiosInstance(config);}}// 错误提示处理if (error.code !== "ERR_CANCELED") {let { message } = error;if (message == "Network Error") message = "连接异常，请稍后重试...";else if (message.includes("timeout")) message = "请求超时，请稍后重试...";ElMessage.error(message || "未知错误，请联系管理员!");}return Promise.reject(error);}
   );// 响应错误处理
   const responseError = (code: number, message: string) => {switch (code) {case 401:if (isLogoutShowing) return;isLogoutShowing = true;ElMessageBox.confirm("登录过期，是否重新登录?", "Warning", {confirmButtonText: "重新登录",cancelButtonText: "取消",type: "warning"}).then(() => {useRequeryStoreInfo.logout();}).finally(() => {isLogoutShowing = false;});break;default:ElMessage.error(message || "未知错误，请联系管理员!");break;}
   };
   export default axiosInstance;
   

2. 在store\request.ts中：

   import { defineStore } from "pinia";
   import { MD5 } from "crypto-js";
   import router from "@/router";/*** 网络请求* requestList:网络请求*/
   interface Config {method?: string;url?: string;data?: any;params?: any;
   }
   interface State {token: string;requestList: Map<string, AbortController>;
   }
   export const useRequeryStore = defineStore("requery", {persist: {pick: ["token"]},state: (): State => ({token: "",requestList: new Map()}),getters: {// 获取requestListgetRequestList: (state) => state.requestList,// 获取TokengetToken: (state) => state.token},actions: {// 重新登录logout() {router.push({ name: "login" });localStorage.clear();sessionStorage.clear();},// 设置TokensetToken(token: string) {this.token = token;},/*** 获取请求key* @param {Config} config 需要method, data, url, params数据* @returns {string} key*/getRequestKey(config: Config): string {const { method, url, data, params } = config;let newData = typeof data === "object" ? JSON.stringify(data) : data;let newParams = typeof params === "object" ? JSON.stringify(params) : params;return MD5([method, url, newParams, newData].join("&")).toString();},/*** 取消请求* @param {string} key 通过getRequestKey生成的key* @param {boolean} isMessage 是否需要提示* @param {boolean} message 提示内容*/cancelRequest(key: string, isMessage: boolean = false, message: string = "请勿重复操作！") {if (this.getRequestList.has(key)) {const controller = this.requestList.get(key);if (controller) {controller.abort();this.requestList.delete(key);}if (isMessage) ElMessage.warning(message);}},// 存储请求数据setRequest(key: string, controller: AbortController) {this.requestList.set(key, controller);},// 移除旧的请求removeOldRequest(key: string) {this.cancelRequest(key, true);},// 移除完成的请求removeNewRequest(config: Config) {const key = this.getRequestKey(config);this.getRequestList.delete(key);},/*** 手动取消请求* @param {Config} config 需要method, data, url, params数据，请和请求的时候一模一样*/manualCancelRequest(config: Config) {const key = this.getRequestKey(config);this.cancelRequest(key, true, "成功取消请求！");}}
   });
   

3. 封装请求接口：在api\login.ts中

   import request from "@/utils/request";// 登录
   export const getLogin = (data?: any) => {return request({url: "/user/login",method: "post",data});
   };
   

4. 错误重复请求：在api\login.ts中

   import request from "@/utils/request";// 登录
   export const getLogin = (data?: any) => {return request({url: "/user/login",method: "post",data,errorRetry:true,retryTotal:3,});
   };