axios 重复请求

清疚 2023-09-24 07:50 195阅读 0赞

![axios 重复请求\_axios 重复请求][axios _axios]

代码截图

需要在axios配置里面加上以上代码。

\`\`\`

letpending=\[\];//声明一个数组用于存储每个ajax请求的取消函数和ajax标识

letcancelToken=axios.CancelToken;

letremovePending=(config)=>\{

for(letpinpending) \{

if(pending\[p\].u===config.url+'&'+config.method) \{//当当前请求在数组中存在时执行函数体

pending\[p\].f();//执行取消操作

pending.splice(p,1);//把这条记录从数组中移除

\}

\}

\}

letcutReq=(config)=>\{

for(letpinpending) \{

if(pending\[p\].u===config.url+'&'+config.method) \{//当当前请求在数组中存在时执行函数体

returntrue;

\}

\}

\}

//添加请求拦截器

axios.interceptors.request.use(config=>\{

letflag=cutReq(config);

if(flag===true)returnnull;//当上一次相同请求未完成时，无法进行第二次相同请求

config.cancelToken=newcancelToken((c)=>\{

//这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式

pending.push(\{u:config.url+'&'+config.method,f:c\});

\});

returnconfig;

\},error=>\{

returnPromise.reject(error);

\});

//添加响应拦截器

axios.interceptors.response.use(res=>\{

removePending(res.config);//在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除

returnres;

\},error=>\{

return\{data:\{\} \};

\});

\`\`\`

使用axios如何取消重复请求

[axios _axios]: https://img-blog.csdnimg.cn/img_convert/d553de55a26d9eba4e8c2d3697029336.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关【axios】002-axios发起请求

目录一、axios常用语法二、请求配置三、发送Get请求四、发送Post请求五、执行多个并发请求 -------------------- 一、axi

喜欢ヅ旅行/ 2023年10月05日 12:07/ 0 赞/ 42 阅读

相关 axios 重复请求

　　![axios 重复请求\_axios 重复请求][axios _axios] 　　代码截图　　需要在axios配置里面加上以上代码。　　\`\`\` 　　le

清疚/ 2023年09月24日 07:50/ 0 赞/ 196 阅读

相关 axios 请求拦截取消重复请求（多次重复异步，结束pending状态）

　　前端开发中，会涉及很多异步事件处理，页面展示的处理关系最密切的就是loading图层，但是loading交互在一些时候会不太友好，后端同学也不喜欢loading状态(后端同

梦里梦外;/ 2023年09月24日 07:50/ 0 赞/ 82 阅读

相关 Axios 如何取消重复请求？

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 `post` 请求可能会导致服务端产生两笔记

ゝ一纸荒年。/ 2023年09月23日 20:19/ 0 赞/ 139 阅读

相关 axios过滤重复请求及批量取消请求

实现思路：把每次发送的请求及参数通过CancelToken创建标记添加到vuex的一个列表中，响应完成后从vuex的列表中删除该标记每次添加标记到列表时先与列表比

谁践踏了优雅/ 2023年02月18日 09:48/ 0 赞/ 34 阅读

相关封装 axios 取消重复请求

编者按：本文作者舒丽琦，奇舞团前端开发工程师在我们web开发过程中，很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢？我们如何取消呢？带着这些问题我们阅读本文。

我就是我/ 2023年01月03日 12:43/ 0 赞/ 258 阅读

相关封装 axios 取消重复请求

编者按：本文作者舒丽琦，奇舞团前端开发工程师在我们web开发过程中，很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢？我们如何取消呢？带着这些问题我们阅读本文。

落日映苍穹つ/ 2022年12月28日 15:25/ 0 赞/ 202 阅读

相关【Web技术】920- Axios 如何取消重复请求？

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 `post` 请求可能会导致服务端产生两笔记

谁践踏了优雅/ 2022年11月16日 10:45/ 0 赞/ 214 阅读

相关 axios 基于拦截器的取消（重复）请求

axios 基于拦截器的取消（重复）请求 // 添加请求拦截器 axios.interceptors.request.use((config) => {

红太狼/ 2022年10月15日 05:45/ 0 赞/ 282 阅读

相关 axios 设置取消重复请求

取消请求需要用到cancelToken，cancelToken就是用来取消ajax请求的，取消请求之后,会进入error,在里面处理一下如果是取消请求,就不报错。在响应拦

桃扇骨/ 2022年10月13日 00:29/ 0 赞/ 210 阅读