在日常的前端开发中，我们经常会遇到频繁发起的重复请求，会对服务器和网络造成不必要的压力。您可以通过取消重复请求来解决该场景。频繁点击路由页面切换请求不取消。解决方法是每次发起请求时，将当前存储的标记存储在一个数组或Map中，在每次请求的请求拦截中检查是否重复。如果已经重复，取消历史中重复的请求，再发起当前请求，如果没有重复，添加存储令牌，正常请求，请求完成清除存储令牌如何取消请求在axios中你可以使用CancelToken.source工厂方法来创建一个取消令牌，像这样：constCancelToken=axios.CancelToken;constsource=CancelToken.source();axios.get('/user/12345',{cancelToken:source.token}).catch(function(thrown){if(axios.isCancel(thrown)){console.log('请求取消',thrown.message);}else{//处理错误}});axios.post('/user/12345',{name:'newname'},{cancelToken:source.token})//取消请求(message参数可选)source.cancel('操作被用户取消。');您还可以通过将执行程序函数传递给CancelToken构造函数来创建取消令牌：constCancelToken=axios.CancelToken;letcancel;axios。get('/user/12345',{cancelToken:newCancelToken(functionexecutor(c){//执行器函数接收一个取消函数作为参数cancel=c;})});//取消requestcancel();在项目封装中使用基础变量定义//是否取消重复请求开关constcancelDuplicated=true//在每个请求中存储mapconstpendingXHRMap=newMap()//取消请求类型定义这样就不会对这个做异常处理typelaterconstREQUEST_TYPE={DUPLICATED_REQUEST:'duplicatedRequest'}设置重复标签的函数constduplicatedKeyFn=(config)=>{//这里可以默认设置用户自定义的其他唯一标识+请求地址return`${config.method}${配置。url}`}添加到请求记录中=config.cancelToken||newaxios.CancelToken((cancel)=>{if(duplicatedKey&&!pendingXHRMap.has(duplicatedKey)){pendingXHRMap.set(duplicatedKey,cancel)}})}删除请求记录constremovePendingXHR=(config)=>{if(!cancelDuplicated){return}constduplicatedKey=JSON.stringify({duplicatedKey:duplicatedKeyFn(config),type:REQUEST_TYPE.DUPLICATED_REQUEST})if(重复dKey&&pendingXHRMap.has(duplicatedKey)){constcancel=pendingXHRMap.get(duplicatedKey)cancel(duplicatedKey)pendingXHRMap.delete(duplicatedKey)}}用于axios//请求拦截处理axios.interceptors.request.use(config=>{removePendingXHR(config)addPendingXHR(config)...returnconfig})//响应拦截处理axios.interceptors.response.use(response=>{removePendingXHR(response.config)...},error=>{//如果是取消请求类型，则忽略异常处理{isDuplicatedType=false}if(!isDuplicatedType){//其他异常处理}})Vue中，路由切换页面时，取消上一页的所有请求router.beforeEach((to,from,next)=>{//遍历pendingMap，取消上一页的所有请求pendingXHRMap.forEach((cancel)=>{cancel();});pendingXHRMap.clear()})频繁发起重复的情况下请求会对服务器和网络造成不必要的压力，可以通过取消重复请求来解决。关注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）指的是如何优雅的解决“重复请求”问题，参考axios官网来取消请求
