前期回顾
实现功能：
以下功能经过测试，亲测 可跑，复制即可运行，原项目：Vite + Ts + Vue3 - template --- 模板: 🎉🎉🔥 Vite + Vue3 + Ts + router + Vuex + axios + eslint 、prettier、stylelint、husky、gitCommit--- 集成多种组件、Hooks支持开封即用，严格的代码质量检验、祝您轻松上大分😷🤺🤺🤺 【动态路由、特效、N个组件、N个自定义指令...】
取消重复请求：完全相同的接口在上一个pending状态时，自动取消下一个请求
请求失败自动重试： 接口请求后台异常时候， 自动重新发起多次请求， 直到达到所设次数
请求接口数据缓存： 接口在设定时间内不会向后台获取数据， 而是直接拿本地缓存
父页面单独取消当前请求、并发取消指定请求
父页面取消所有请求
更多功能根据你的需求自定制
目录
🌍 第一 配置 vite.config.ts 基地址：
🤖 第二 配置环境变量：
🛹 第三 新建 配置ts类型文件
新建 src/type/axiso.d.ts
/* eslint-disable */
import * as axios from 'axios';
// 扩展 axios 数据返回类型，可自行扩展
declare module 'axios' {
// 响应的对象
export interface AxiosResponse<T = any> {
code: number;
data: T;
message: string;
type?: string;
/*
[key: string]: T; 这段代码是定义了一个索引签名，它表示可以使用任意字符串作为key，并且对应的值的类型是T。
索引签名允许在对象中使用动态的属性，也就是说，在定义AxiosResponse接口时，除了预定义的code、data、message属性，还可以添
加其他任意属性，且属性的值的类型是T。
*/
[key: string]: T;
}
// 请求的对象
export interface AxiosRequestConfig<T = any> {
[key: string]: T;
}
// 错误类型
export interface AxiosError<T = any> {
config: AxiosRequestConfig<T>;
code?: string;
request?: any;
response?: AxiosResponse<T>;
isAxiosError: boolean;
retry?: number;
retryDelay?: number;
retryCount: number;
cache?: boolean;
cacheTimestamp?: number;
[key: string]: T;
}
// 取消请求类型
export interface CancelTokenSource<T = any> {
token: CancelToken;
cancel: Canceler;
isFinished?: boolean;
[key: string]: T;
}
}
🪂 第四 新建 封装本地存储文件
/**
* window.localStorage 浏览器永久缓存
* @method set 设置永久缓存
* @method get 获取永久缓存
* @method remove 移除永久缓存
* @method clear 移除全部永久缓存
*/
export const Local = {
// 设置永久缓存
set(key: string, val: any) {
window.localStorage.setItem(key, JSON.stringify(val));
},
// 获取永久缓存
get(key: string) {
const json = <string>window.localStorage.getItem(key);
// !null为true
if (!json) return null;
// 这里是防止 在本地直接修改了localStorage的值，不经过上面转换，导致JSON.parse报错
return JSON.parse(JSON.stringify(json));
},
// 移除永久缓存
remove(key: string) {
window.localStorage.removeItem(key);
},
// 移除全部永久缓存
clear() {
window.localStorage.clear();
},
};
/**
* window.sessionStorage 浏览器临时缓存
* @method set 设置临时缓存
* @method get 获取临时缓存
* @method remove 移除临时缓存
* @method clear 移除全部临时缓存
*/
export const Session = {
// 设置临时缓存
set(key: string, val: any) {
window.sessionStorage.setItem(key, JSON.stringify(val));
},
// 获取临时缓存
get(key: string) {
const json = <string>window.sessionStorage.getItem(key);
if (!json) return null;
return JSON.parse(JSON.stringify(json));
},
// 移除临时缓存
remove(key: string) {
window.sessionStorage.removeItem(key);
},
// 移除全部临时缓存
clear() {
window.sessionStorage.clear();
},
};
/**
* 获取本地的key集合
* @method getLocalKey
* @param { string } key - 要获取的key值
* @param { object } type - 从那里获取 localStorage、sessionStorage
* @description 传入key值，返回匹配的key,不传返回全部key数组
* @returns { string } 返回匹配的key或者全部key数组
* @example
* > getLocalKey('token') // 返回local token
* > getLocalKey('token', localStorage) // 返回local token
* > getLocalKey('token', sessionStorage) // 返回session token
* > getLocalKey() // 返回localStorage全部key数组
* > getLocalKey(undefined, sessionStorage) // 返回sessionStorage全部key数组
* @author zk
* @createDate 2023/08/17 13:58:19
* @lastFixDate 2023/08/17 13:58:19
*/
export const getLocalKey = (
key?: string,
type: object = localStorage
): string[] | string | undefined => {
const keys = Object.keys(type);
if (!key) return keys;
if (keys.length > 0) {
for (let i = 0; i < keys.length; i++) {
const item = keys[i];
if (item.indexOf(key) > -1) {
return item;
}
}
}
return undefined;
};
新建 配置 isLocalCache.ts
用于清除接口开启了缓存，但长时间未调用此接口且未关闭当前进程（页签）的缓存
import { Session, getLocalKey } from "./storage";
/**
* @description Q: 接口存于会话存储中此函数还要必要吗？不调用缓存接口不会清除吗？
* @description A: 1：有，用于清除接口开启了缓存，但长时间未调用此接口且未关闭当前进程（页签）的缓存
* @description 2：是，目前是这样的设计模式，会话存储数据是调用缓存接口时，发现过期了才会清除，或者关闭当前进程（页签）就会自动清除
* @description 总结： 只有刷新页面和第一次进入页面时才会执行，
* @author zk
* @createDate 2023/08/19 16:02:02
* @lastFixDate 2023/08/19 16:02:02
*/
export default () => {
const arrKeys = getLocalKey(undefined, sessionStorage) as string[];
if (!arrKeys.length) return; // 本地没有缓存终止执行
const localKey = arrKeys.filter(
(item) => item.includes("post-/") || item.includes("get-/")
);
if (!localKey.length) return; // 本地缓存中未找到接口缓存终止执行
localKey.forEach((key) => {
const item = Session.get(key);
if (item && Date.now() - JSON.parse(item).cacheTimestamp > 1000 * 60 * 5) {
// 5分钟未调用接口，清除缓存,因为缓存时间最多是5分钟
Session.remove(key);
}
});
};
App.vue引入：
<script lang="ts">
import isLocalCache from "./utils/isLocalCache";
isLocalCache();
</script>🎋 第五 封装axios：
新建 \src\api 文件夹，里面有三个ts文件，serves.ts 封装axios统一请求，requestMethod.ts 封装的是请求方法，api.ts 封装的是不同api接口，方便统一管理不至于api接口分散项目各处造成不易维护。
新建 src\api\serves.ts
import axios, {
AxiosInstance,
AxiosRequestConfig,
CancelTokenSource,
AxiosError,
AxiosResponse,
} from 'axios';
import { downloadFile } from '@/utils/download';
/*
1. 取消重复请求：完全相同的接口在上一个pending状态时，自动取消下一个请求
2. 请求失败自动重试： 接口请求后台异常时候， 自动重新发起多次请求， 直到达到所设次数
3. 请求接口数据缓存： 接口在设定时间内不会向后台获取数据， 而是直接拿会话存储本地缓存，（关闭当前进程也就是页签就会自动清除）
4. 父页面单独取消当前请求
5. 父页面取消所有请求
*/
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '@/utils/storage';
import app from '@/main';
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 5000,
});
// handlerRequest Start --------------------------------------------------------------------------
const hideLoading = () => app.config.globalProperties.$smallLoading.hideLoading();
const showLoading = () => app.config.globalProperties.$smallLoading.showLoading();
// requestKey用于缓存接口函数 判断是否存在相同的请求
let requestKey = '';
// 创建一个存储请求的Map对象
const pendingRequests: Map<string, CancelTokenSource> = new Map();
// 取消重复请求的方法
const cancelDuplicateRequest = (config: AxiosRequestConfig): void => {
requestKey = `${config.method}-${config.url}`; // 生成请求的唯一标识
// 如果已经存在该请求，则取消该请求
if (pendingRequests.has(requestKey)) {
const cancelToken = pendingRequests.get(requestKey);
cancelToken?.cancel('进行中的重复请求被拦截，请您等待当前请求完成后再发起请求');
}
const cancelToken = axios.CancelToken.source(); // 生成一个取消请求的标识
pendingRequests.set(requestKey, cancelToken); // 将该请求保存到 pendingRequests 中
config.cancelToken = cancelToken.token; // 设置取消请求的标识
};
type cacheTimestamp = 1 | 2 | 3 | 4 | 5;
/**
* 接口缓存
* @method requestIsCache
* @param { string } payloadUrl 请求方法-/api地址 require
* @param { number } responseConfigCacheFlag 1-5(分钟) 缓存阈值 require
* @returns { Promise<any> } 返回一个Promise对象
* @example
* > 1. 在需要缓存的接口中添加 cache: true
* > 2. import { requestIsCache, cancelAllRequest, cancelCurrentRequest } from '/@/utils/request'; // 对应缓存、取消全部请求、取消当前请求
* > 3. requestIsCache('post-/menu/queryMenuTree', 1) // 注意先调用缓存接口，失败状态下在调用真实接口
* @author zk
* @createDate 2023/08/14 14:19:52
* @lastFixDate 2023/08/14 14:19:52
*/
function requestIsCache(payloadUrl: string, responseConfigCacheFlag: cacheTimestamp): Promise<any> {
const keys = Object.keys(sessionStorage);
if (keys.includes(payloadUrl)) {
// 本地是否有相同key
// 停留时间
const stopover = Date.now() - JSON.parse(Session.get(payloadUrl))?.cacheTimestamp;
const isCache = stopover > 1000 * 60 * responseConfigCacheFlag; // 停留时间 > 缓存时间阈值
// console.log("停留时间", stopover);
// console.log("判断阈值", 1000 * 60 * responseConfigCacheFlag);
// console.log("本地是否有相同key", keys.includes(payloadUrl));
// console.log("是否过期 ==>:", isCache); // 过期 true 未过期 false
// 缓存未过期
if (!isCache) {
// 直接返回本地缓存数据
const cacheData = Session.get(payloadUrl);
return Promise.resolve(cacheData);
} else {
// 清除缓存
Session.remove(payloadUrl);
return Promise.reject('本地不存在当前接口缓存或者缓存已过期');
}
} else {
return Promise.reject('本地不存在当前接口的缓存key');
}
}
const tipError = (value: string, title: string) => {
ElMessageBox.alert(value, title, {
confirmButtonText: '重新登录',
type: 'warning',
}).then(() => {
Session.clear(); // 清除临时缓存
// 清除cookie
document.cookie.split(';').forEach(function (c) {
document.cookie = c
.replace(/^ +/, '')
.replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');
});
window.location.reload(); // 刷新页面
});
};
// 请求失败自动重试的方法 请求失败时、响应失败时、重试请求会触发
const retryFailedRequest = async (error: AxiosError | AxiosResponse): Promise<any> => {
const config = error;
// 如果没有设置重试次数 则直接返回错误
if (!config || !config.retry) return Promise.reject(config);
// 设置重试次数阈值达到后不再重试
if (config.retryCount >= config.retry) return;
// 设置重试次数关闭阈值
config.retryCount = config.retryCount || 0;
// 重试次数自增
config.retryCount += 1;
// 设置重试延时
const delay = config.retryDelay || 1000;
// 延时处理
await new Promise<void>((resolve) => {
setTimeout(() => resolve(), delay);
});
// 需要等待上一次重试结束后才能继续执行
return await Promise.resolve(service(config));
};
// handlerRequest End --------------------------------------------------------------------------
// Axios 的请求拦截器期望返回一个配置对象，而不是响应对象。如果你试图返回一个响应对象，Axios 将会抛出一个错误。
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么？
const token = Session.get('token');
if (token) config.headers!['token'] = token; // 在请求头中添加 token
// 取消重复请求
cancelDuplicateRequest(config);
showLoading();
return config;
},
(error) => {
// 对请求错误做些什么？
hideLoading();
// 请求失败重试
retryFailedRequest(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么？ 这里只返回【成功响应的http状态】数据！
const {
config,
data,
data: { code, msg },
} = response;
hideLoading();
// http状态是200 但是code不是200 返回数据是错误的需要return
if (code !== 200) {
// if (Object.prototype.toLocaleString.call(data) === '[object Blob]') return response;
if (response.headers['content-type'] == 'application/octet-stream') return response;
if (!message) return ElMessage.error('🤖 响应失败,接口未返回任何内容');
// 如果后台返回的错误码为 100010016 重复登录、100010011 token过期、100010012 token可能被篡改
let errArr = [100010016, 100010011, 100010012];
if (errArr.includes(code)) {
hideLoading();
NextLoading.done();
return tipError(message, '错误提示');
}
ElMessage.error(message);
// 需要将错误对象返回，在使用页面调用根据错误码做相应的处理
return data;
}
// 给 pendingRequests 标记一个isFinished为true 请求完成的标识,用于取消正在进行中的请求
const responseKey = `${config.method}-${config.url}`;
const request = pendingRequests.get(responseKey);
if (request && request.token) {
pendingRequests.set(responseKey, { ...request, isFinished: true });
}
// 判断是否有缓存
if (config.cache) {
const cachedResponse = Session.get(responseKey);
if (cachedResponse) {
return cachedResponse;
} else {
// 接口有 cache 参数，且缓存不存在，则缓存接口数据,并插入当前时间戳
data.cacheTimestamp = new Date().getTime();
Session.set(responseKey, data);
return data;
}
} else {
return data;
}
},
(error) => {
// 对响应错误数据做点什么？
hideLoading();
/*
axios.isCancel(error) 是 Axios 库中的一个方法，用于判断一个错误对象是否是由于请求取消导致的。
当使用 axios.CancelToken 取消请求时，会抛出一个带有一个 message 属性的错误对象。
axios.isCancel(error) 的作用就是判断这个错误对象的类型，如果是由请求取消导致的错误，则返回 true，否则返回 false。
console.log('打印cancelToken.cancel('xxx')传入来的值', error.message);
*/
if (axios.isCancel(error)) {
// 只提示请求取消有主动填写的消息 如：cancelToken.cancel('xxx')
if (error.message !== 'canceled')
ElMessage.error(' 🤖 ' + error.message + '---' + requestKey);
} else {
// 响应失败重试
retryFailedRequest(error);
// 不是由请求取消导致的错误
let errorMessage; // 错误提示变量
const statusData = error.response?.data; // 错误data数据
const describeForNameMap = [
[
() => error.message.indexOf('timeout') !== -1,
() => (errorMessage = '网络超时 🤖'),
],
[() => error.message === 'Network Error', () => (errorMessage = '网络连接错误 🤪')],
// 否则 显示错误消息，这里要根据后台返回的数据结构来定
[() => statusData, () => (errorMessage = statusData.message)],
];
// 获取符合条件的子数组
const getDescribe = describeForNameMap.find((item) => item[0]());
// 执行子数组中的函数
getDescribe && getDescribe[1]();
ElMessage.error(errorMessage); // 显示错误消息
}
}
);
// 取消全部请求的方法
export const cancelAllRequest = (): void => {
// 创建一个标记 是否取消成功，初始值为false
let hasCancelled = false;
// 遍历所有待处理的请求
pendingRequests.forEach((value) => {
// 如果请求还没有完成
if (!value.isFinished) {
// 取消请求
value.cancel();
// 将标记设为true
hasCancelled = true;
}
});
// 清空待处理请求的集合
pendingRequests.clear();
// 至少取消了一个请求，显示提示,防止都是成功请求点击取消按钮时也提示
if (hasCancelled) {
ElMessage.success('成功取消全部请求');
}
};
// 取消当前请求的方法
export const cancelCurrentRequest = (payloadCurrentKey: string = requestKey): void => {
// 遍历所有待处理的请求
pendingRequests.forEach((value, key) => {
// 传过来key和请求的key相同，且请求还没有完成
if (key === payloadCurrentKey && !value.isFinished) {
value.cancel();
pendingRequests.delete(key);
ElMessage.success('成功取消当前请求');
}
});
};
// 导出 service将其命名为serviceAxios , requestIsCache 用于判断是否有缓存
export { service as serviceAxios, requestIsCache };
src\api\requestMethod.ts：
import { AxiosRequestConfig } from 'axios';
import { axios } from './request';
// post使用data接受参数，get使用params接受参数
// 如果是post请求，但是参数是在url上的，那么就要使用params接受参数，否则使用data接受参数
// put 也相当与post请求,如果报参数错误,就是接受参数的请求体错了post/put用data,get请求用params
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
interface BaseConfig {
method: Method;
retry?: number;
retryDelay?: number;
cache?: boolean;
}
type Config = BaseConfig & AxiosRequestConfig;
/**
* request 配置
* @param { string } method 请求方法
* @param { object } headers - 请求头
* @param { string } responseType 响应类型 比如文件流、json
* @param { string } url 请求地址
* @param { object } data| params 请求参数
* @param { number } retry 重试次数
* @param { number } retryDelay 重试延迟
* @param { boolean } cache 是否缓存
* @returns { Promise } Promise
* @createDate 2023/08/09 13:12:08
* @lastFixDate 2023/08/09 13:12:08
*/
function request({
method = 'GET',
headers = { 'Content-Type': 'application/json;charset=UTF-8' },
responseType,
url,
data = {},
params = {},
retry,
retryDelay,
cache,
}: Config): Promise<any> {
return axios({
method,
headers,
responseType,
url,
data,
params,
retry,
retryDelay,
cache,
});
}
export default request;
src\api/auth-manage/menu.ts：
// 导入axios实例中的AxiosResponse泛型接口
import { AxiosResponse } from "axios";
//导入封装的axios请求方法
import request from "-/requestMethod";
// 如果是get请求不需要写method，post请求使用data请求体 默认封装的get
// post示例
// export const login = (data) => request({ method: "post", url: '/login', data: data });
// get示例
// export const getUserList = (params) => request({ url: '/users', params });
// put示例
// export const getEdit = (data) => request({
// method: "put",
// data,
// url: "users/" + data.uid + "/state/" + data.type,
// })
export const history = (): Promise<AxiosResponse<any, any>> =>
request({
method: "GET",
url: "common/history",
cache: true,
retry: 3,
// headers: {
// 'Content-Type':
// 'application/vnd.openxmlformats-officedocument.wordprocessingml.document ',
// },
// responseType: 'blob',
});
/**
* @name chat接口
* @param { object } params 请求参数
* @description 接口缓存、重试3次（请求、响应失败时）
* @author zk
* @createDate 2023/08/14 14:57:20
* @lastFixDate 2023/08/14 14:57:20
*/
export const chat = (params: object): Promise<AxiosResponse<any, any>> =>
request({
method: "GET",
url: "ai/chat",
cache: true,
retry: 3,
params,
});
👀 第六 页面使用：
<script setup lang="ts">
/*
requestIsCache - 判断请求是否开启了缓存
cancelAllRequest - 取消所有请求
cancelCurrentRequest - 取消当前请求
*/
import {
requestIsCache,
cancelAllRequest,
cancelCurrentRequest,
} from "-/request";
import { AxiosResponse } from "axios";
import { ElMessage } from "element-plus";
import { chat, history } from "-/login";
// 封装请求错误提示 http状态是200 但是code不是200 返回数据是错误的需要处理
function tipError<T extends AxiosResponse>(res: T) {
if (res.code !== 200) {
ElMessage.error(res.msg);
return;
}
}
// 发起 chat
const getA = async () => {
// 缓存函数，如果在接口开启了cache: true,需要在请求前调用此函数
await requestIsCache("get-ai/chat", 1)
.then((res) => {
if (!res) return;
tipError(res);
ElMessage.success("✈️ 本地数据请求成功----" + res.result.displayText);
})
.catch(() => {
// 真正接口
chat({ text: "张坤" }).then((res) => {
if (!res) return;
tipError(res);
ElMessage.success("🤖 接口数据-----" + res.result.displayText);
});
});
};
// 取消 chat
const cancelA = () => {
// 在适当的时机调用取消请求（例如点击取消按钮）,不传参数默认取消最后一条请求
cancelCurrentRequest("get-ai/chat");
};
// 发起 history
const getB = async () => {
await history().then((res) => {
if (!res) return;
tipError(res);
ElMessage.success("🤖 接口数据" + res.msg);
});
};
// 取消 history
const cancelB = () => {
cancelCurrentRequest();
};
// 取消所有请求
function cancelAll() {
cancelAllRequest();
}
</script>
<template>
<div>
<!-- 发起 -->
<el-button type="primary" @click="getA">发起A</el-button>
<!-- 取消 -->
<el-button type="danger" @click="cancelA">取消A</el-button>
<!-- 发起 -->
<el-button type="primary" @click="getB">发起B</el-button>
<!-- 取消 -->
<el-button type="danger" @click="cancelB">取消B</el-button>
<el-button type="danger" @click="cancelAll">取消所有请求</el-button>
</div>
</template>
全文结束，所有代码都在文中，最上面的链接中也有 原项目
_______________________________ 期待再见 _______________________________
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
