东莞网站排名优化费用,跨境电商网站建设流程成都市公服,wordpress题库,首尔面积前期回顾
从零搭建 Vue3 VIte Ts 项目 —— 并集成eslint 、prettier、stylelint、husky、lint-staged、pinia、axios、loding、动态路由…_彩色之外的博客-CSDN博客 实现功能#xff1a; 取消重复请求#xff1a;完全相同的接口在上一个pending状态时#xff0c;自动取…
前期回顾
从零搭建 Vue3 VIte Ts 项目 —— 并集成eslint 、prettier、stylelint、husky、lint-staged、pinia、axios、loding、动态路由…_彩色之外的博客-CSDN博客 实现功能 取消重复请求完全相同的接口在上一个pending状态时自动取消下一个请求 请求失败自动重试 接口请求后台异常时候 自动重新发起多次请求 直到达到所设次数 请求接口数据缓存 接口在设定时间内不会向后台获取数据 而是直接拿本地缓存 父页面单独取消当前请求、并发取消指定请求 父页面取消所有请求 更多功能根据你的需求自定制 目录 第一 配置 vite.config.ts 基地址 第二 配置环境变量 第三 配置ts类型 第四 封装本地存储 第五 封装axios 第六 页面使用 第一 配置 vite.config.ts 基地址 第二 配置环境变量 第三 配置ts类型
src/type/axiso.d.ts
/* eslint-disable */
import * as axios from axios;// 扩展 axios 数据返回类型可自行扩展
declare module axios {export interface AxiosResponseT any {code: number;data: T;message: string;type?: string;/* [key: string]: T; 这段代码是定义了一个索引签名它表示可以使用任意字符串作为key并且对应的值的类型是T。索引签名允许在对象中使用动态的属性也就是说在定义AxiosResponse接口时除了预定义的code、data、message属性还可以添加其他任意属性且属性的值的类型是T。*/[key: string]: T;}export interface AxiosRequestConfigT any {retry?: number;retryDelay?: number;cache?: boolean;cacheTimestamp?: number;[key: string]: T;}export interface AxiosErrorT any {config: AxiosRequestConfigT;code?: string;request?: any;response?: AxiosResponseT;isAxiosError: boolean;retry?: number;retryDelay?: number;retryCount: number;cache?: boolean;cacheTimestamp?: number;[key: string]: T;}export interface CancelTokenSourceT 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) {let json stringwindow.localStorage.getItem(key);// !null为trueif (!json) return null;return JSON.parse(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) {let json stringwindow.sessionStorage.getItem(key);if (!json) return null;return JSON.parse(json);},// 移除临时缓存remove(key: string) {window.sessionStorage.removeItem(key);},// 移除全部临时缓存clear() {window.sessionStorage.clear();},
};第五 封装axios
新建 \src\api 文件夹里面有三个ts文件request.ts 封装axios统一请求requestMethod.ts 封装的是请求方法api.ts 封装的是api接口方便统一管理不至于api接口分散项目各处造成不易维护。
src\api\request.ts
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, CancelTokenSource } from axios;
/* 1. 取消重复请求完全相同的接口在上一个pending状态时自动取消下一个请求 2. 请求失败自动重试 接口请求后台异常时候 自动重新发起多次请求 直到达到所设次数 3. 请求接口数据缓存 接口在设定时间内不会向后台获取数据 而是直接拿本地缓存4. 父页面单独取消当前请求5. 父页面取消所有请求
*/// 导入 element-plus 中的消息和弹框组件
import { ElMessage, ElMessageBox } from element-plus;
// 导入 storage.ts 中的 Session 对象
import { Session } from //utils/storage;
// 导入 main.ts 中的 app 对象 用于Loading组件的显示和隐藏
import app from //main;// 创建 Axios 实例
const service: AxiosInstance axios.create({baseURL: import.meta.env.VITE_API_URL, // 设置基础 URLtimeout: 5000, // 设置超时时间headers: { Content-Type: application/json }, // 设置请求头
});// handlerRequest Start --------------------------------------------------------------------------// cacheTimestamp用于判断是否存在相同缓存的请求
let cacheTimestampFlag 0;
// requestKey用于缓存接口函数 判断是否存在相同的请求
let requestKey ;
// 创建一个存储请求的Map对象
const pendingRequests: Mapstring, 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 中pendingRequests.set(requestKey, cancelToken);// 设置取消请求的标识config.cancelToken cancelToken.token;// 设置缓存时间if (config.cacheTimestamp) {cacheTimestampFlag eval(1000 * 60 * ${config.cacheTimestamp});}// 如果本地有缓存数据直接返回缓存数据不经过请求拦截if (config.cache) requestIsCache();
};
// 缓存接口函数 - 注意发起请求判断是否存在相同url
async function requestIsCache(): Promiseany {// 获取本地存储的所有键const keys Object.keys(sessionStorage);if (requestKey) {// 停留时间 缓存时间阈值const isCache Date.now() - Session.get(requestKey)?.cacheTimestamp cacheTimestampFlag;// console.log(是否有key, keys.includes(requestKey));// console.log(停留时间, Date.now() - Session.get(requestKey)?.cacheTimestamp);// console.log(判断阈值, cacheTimestampFlag);// 如果包含 urlKey 并且 缓存未过期if (keys.includes(requestKey) !isCache) {// 直接返回本地缓存数据const cacheData Session.get(requestKey);return Promise.resolve(cacheData);} else {// 清除缓存Session.remove(requestKey);// 不存在缓存 或 缓存已过期return Promise.reject(不存在缓存 或 缓存已过期);}}
}// 封装提示函数 token过期、重复登录
const tipError (value: string, title: string) {ElMessageBox.alert(value, title, {confirmButtonText: title,type: warning,}).then(() {Session.clear(); // 清除临时缓存// 清除cookiedocument.cookie.split(;).forEach(function (c) {document.cookie c.replace(/^ /, ).replace(/.*/, ;expires new Date().toUTCString() ;path/);});window.location.reload(); // 刷新页面});
};// 请求失败自动重试的方法
const retryFailedRequest async (error: AxiosError): Promiseany {const config error;// 如果没有设置重试次数 或 已经达到最大重试次数则直接返回错误if (!config || !config.retry || config.retryCount config.retry) {return Promise.reject(config);}// 设置重试次数关闭阈值config.retryCount config.retryCount || 0;// 重试次数自增config.retryCount 1;// 设置重试延时const delay config.retryDelay || 1000;// 延时处理await new Promisevoid((resolve) {setTimeout(() resolve(), delay);});// console.log( :, service(config));return service(config);
};
// handlerRequest End --------------------------------------------------------------------------// Axios 的请求拦截器期望返回一个配置对象而不是响应对象。如果你试图返回一个响应对象Axios 将会抛出一个错误。
service.interceptors.request.use(async (config: AxiosRequestConfig) {// 在发送请求之前做些什么const token Session.get(token);if (token) config.headers![token] token; // 在请求头中添加 token// 取消重复请求cancelDuplicateRequest(config);app.config.globalProperties.$smallLoading.showLoading();return config;},async (error) {// 对请求错误做些什么app.config.globalProperties.$smallLoading.hideLoading();// 请求失败重试await retryFailedRequest(error);return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) {// 对响应数据做点什么 这里只返回成功响应数据const { config, data } response;// 给 pendingRequests 标记一个isFinished为true 请求完成的标识const responseKey ${config.method}-${config.url};const request pendingRequests.get(responseKey);if (request request.token) {pendingRequests.set(responseKey, { ...request, isFinished: true });}const cacheKey ${config.method}-${config.url};app.config.globalProperties.$smallLoading.hideLoading();// 判断是否有缓存if (config.cache) {const cachedResponse Session.get(cacheKey);if (cachedResponse) {return cachedResponse;} else {// 接口有 cache 参数且缓存不存在则缓存接口数据,并插入当前时间戳data.cacheTimestamp new Date().getTime();Session.set(cacheKey, data);return data;}} else {return data;}},(error) {// 对响应错误数据做点什么这里只显示错误消息app.config.globalProperties.$smallLoading.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(requestKey error.message);} else {// 响应失败重试retryFailedRequest(error);// 不是由请求取消导致的错误let errorMessage; // 错误提示变量let statusData error.response?.data; // 错误data数据const describeForNameMap [[() error.message.indexOf(timeout) ! -1,() (errorMessage 网络超时 ),],[() error.message Network Error, () (errorMessage 网络连接错误 )],[() statusData?.code 100010021,() {// 100010021 重复登录errorMessage statusData.message;tipError(errorMessage, 重复登录);},],[() statusData?.code 100010011,() {// 100010011 token过期errorMessage statusData.message;tipError(errorMessage, 登录过期);},],// 否则 显示错误消息这里要根据后台返回的数据结构来定[() statusData, () (errorMessage statusData.message)],];// 获取符合条件的子数组const getDescribe describeForNameMap.find((item) item[0]());// 执行子数组中的函数getDescribe getDescribe[1]();ElMessage.error(errorMessage); // 显示错误消息}}
);
// 取消全部请求的方法
export const cancelAllRequest (): void {// 创建一个标记 是否取消成功初始值为falselet hasCancelled false;// 遍历所有待处理的请求pendingRequests.forEach((value) {// 如果请求还没有完成if (!value.isFinished) {// 取消请求value.cancel();// 将标记设为truehasCancelled true;}});// 清空待处理请求的集合pendingRequests.clear();// 至少取消了一个请求显示提示,防止都是成功请求点击取消按钮时也提示if (hasCancelled) {ElMessage.success(成功取消全部请求);}
};// 取消当前请求的方法
export const cancelCurrentRequest (payloadCurrentKey: string requestKey): void {// 遍历所有待处理的请求pendingRequests.forEach((value, key) {if (key payloadCurrentKey) {value.cancel();pendingRequests.delete(key);ElMessage.success(成功取消当前请求);}});
};// 导出 service将其命名为axios , requestIsCache 用于判断是否有缓存
export { service as axios, requestIsCache };src\api\requestMethod.ts
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;
// 规定缓存时间戳的类型只能 1 - 5 分钟
type cacheTimestamp 1 | 2 | 3 | 4 | 5;/*** name request 配置* param { string } - method 请求方法* param { string } - url 请求地址* param { object } - data/params 请求参数* param { number } - retry 重试次数* param { number } - retryDelay 重试延迟* param { boolean } - cache 是否缓存* param { number } - cacheTimestamp 缓存过期 1-5分钟* createDate 2023/08/09 13:12:08* lastFixDate 2023/08/09 13:12:08*/
interface requestConfig {method: method;url: string;data?: object;params?: object;retry?: number;retryDelay?: number;cache?: boolean;cacheTimestamp?: cacheTimestamp;
}function request({method GET,url,data {},params {},retry,retryDelay,cache,cacheTimestamp 1,
}: requestConfig) {return axios({method,url,data,params,retry,retryDelay,cache,cacheTimestamp,});
}export default request;src\api/auth-manage/menu.ts
// 导入axios中的AxiosResponse的泛型接口
import { AxiosResponse } from axios;
// 导入封装的axios请求方法
import request from //utils/requestMethod;// 获取菜单树接口: 不包含菜单中的按钮
export const getMenuTree (): PromiseAxiosResponseany request({method: POST,url: /menu/queryMenuTree,cache: true,cacheTimestamp: 1,});第六 页面使用
script setup langts nameimportGeneration
import { getMenuTree } from //api/auth-manage/menu;
import { getUserInfo } from //api/auth-manage/user;
import { ElMessage } from element-plus;/* requestIsCache - 判断请求是否开启了缓存cancelAllRequest - 取消所有请求cancelCurrentRequest - 取消当前请求
*/
import { requestIsCache, cancelAllRequest, cancelCurrentRequest } from //utils/request;// 封装请求错误提示 http状态是200 但是code不是200 返回数据是错误的需要处理
function tipErrorT extends { code: number; message: string }(res: T) {if (res.code ! 200) {ElMessage.error(res.message);return;}
}
// 发起 getMenuTree
const handleClick async () {// 缓存函数如果在接口开启了cache: true,需要在请求前调用此函数await requestIsCache().then((res) {if (!res) return;tipError(res);ElMessage.success(本地数据请求成功);}).catch(() {getMenuTree().then((res) {if (!res) return;tipError(res);ElMessage.success(res.message);});});
};// 取消 getMenuTree
const handleCance () {// 在适当的时机调用取消请求例如点击取消按钮,不传参数默认取消最后一条请求cancelCurrentRequest(post-/menu/queryMenuTree);
};// 取消 getUserInf
const handleCance1 () {cancelCurrentRequest(get-/user/info);
};// 发起 getUserInf
const handleClick1 async () {await getUserInfo().then((res) {if (!res) return;tipError(res);ElMessage.success(res.message);});
};// 取消所有请求
function handleCancelAll() {cancelAllRequest();
}
/scripttemplatediv!-- 发起 --el-button typeprimary clickhandleClick发起 getMenuTree axios/el-button!-- 取消 --el-button typedanger clickhandleCance取消 getMenuTree/el-button!-- 发起 --el-button typeprimary clickhandleClick1发起 getUserInf axios/el-button!-- 取消 --el-button typedanger clickhandleCance1取消 getUserInf/el-buttonel-button typedanger clickhandleCancelAll取消所有请求/el-button/div
/template
全文结束所有代码都在文中最上面的链接中也有原项目 _______________________________ 期待再见 _______________________________
