取消重复请求,只让最后一次请求通过

虚树磷火
• 阅读 4870

axios 请求拦截 取消重复请求(多次重复异步,结束pending状态)

前端开发中,会涉及很多异步事件处理,页面展示的处理关系最密切的就是loading图层,但是loading交互在一些时候会不太友好,后端同学也不喜欢loading状态(后端同学:这不就是说我的接口返回慢嘛?我的锅!)
前端函数节流防抖也是一个解决方法,但是又有一个问题是,我们处理的是异步,只要有异步就会有等待,比如,防抖时间是1s,异步事件触发了两次,就需要最快2s完成,假设第一次异步3s返回,第二次异步0.5秒返回;那出现的情况就是,第一次触发的3s异步,1s内没有返回,1s后第二次触发异步,第一次的异步还没有返回,第二次的异步就就开始了,0.5秒后第二次异步返回了,但是最终结果响应的是第一次的异步。

取消重复请求,只让最后一次请求通过

解决方案:利用axios可以很方便的取消重复请求的pending状态,结束重复请求,只让最后一次请求通过

官方文档:http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88
let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    console.log('pending',pending);
    for(let p in pending){
        if(pending[p].u === config.url.split('?')[0] + '&' + config.method) { 
        //当当前请求在数组中存在时执行函数体
            pending[p].f(); //执行取消操作
            pending.splice(p, 1); //数组移除当前请求
        }
    }
}
//请求拦截
service.interceptors.request.use(function(config) { 
    /*.....*/
  removePending(config); //在一个axios发送前执行一下取消操作
  config.cancelToken = new cancelToken((c)=>{
        // pending存放每一次请求的标识,一般是url + 参数名 + 请求方法,当然你可以自己定义
    pending.push({ u: config.url.split('?')[0] +'&' + config.method, f: c});//config.data为请求参数
  });
   /*.....*/

})

取消重复请求,只让最后一次请求通过

点赞
收藏
评论区
推荐文章
Easter79 Easter79
4年前
vue 根据接口返回的状态码判断用户登录状态并跳转登录页,登录后回到上一个页面(http拦截器)
背景:后台接口返回code501表示用户是未登录状态,需要登录才可访问;通过http拦截做路由跳转 第一步:src目录下新建http.js文件,内容如下:importAxiosfrom'axios'import{Loading,Message,MessageBox}from'elementui'
Easter79 Easter79
4年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
CuterCorley CuterCorley
4年前
uni-app入门教程(5)接口的基本使用
前言本文主要介绍uniapp提供的一些基础接口,包括:网络请求接口,用于通过指定的请求方法,携带特定的数据,向特定的地址请求并返回请求结果;图片处理接口,包括选择、预览、获取信息、保存到本地等接口;文件处理接口,包括文件上传和下载接口;数据缓存接口,包括以同步或异步的方式保存、获取或删除数据的接口。一、网络请求小程序要想正常运转,都需要与服务器端进
Stella981 Stella981
4年前
SpringBoot项目中自定义404页面
1错误处理有原理分析使用SpringBoot创建的web项目中,当我们请求的页面不存在(http状态码为404),或者服务器发生异常(http状态码一般为500)时,SpringBoot就会给我们返回错误信息。也就是说,在SpringBoot的web项目中,会自动创建一个/error的错误接口,来返回错误信息。但是针对不同的访问方式,会有以下两种
Stella981 Stella981
4年前
SpringBoot+Redis+拦截器+自定义注解实现接口幂等性
一、概念任意多次执行所产生的影响均与一次执行的影响相同。按照这个含义,最终的含义就是对数据库的影响只能是一次性的,不能重复处理。比如:订单接口,不能多次创建订单。支付接口,重复支付同一笔订单只能扣一次钱。支付宝回调接口,可能会多次回调,必须处理重复回调。普通表单提交接口
Stella981 Stella981
4年前
Android异步操作总结
Android中经常会有一些操作比如网络请求,文件读写,数据库操作,比较耗时,我们需要将其放在非UI线程去处理,此时,我们需要处理任务前后UI的变化和交互。我们需要通过类似js中异步请求处理,这里总结我所了解到的,方便自己记忆,也方便别人的浏览。1.AsyncTasknewAysncTask().execute();AsyncTask会
Easter79 Easter79
4年前
SpringBoot项目中自定义404页面
1错误处理有原理分析使用SpringBoot创建的web项目中,当我们请求的页面不存在(http状态码为404),或者服务器发生异常(http状态码一般为500)时,SpringBoot就会给我们返回错误信息。也就是说,在SpringBoot的web项目中,会自动创建一个/error的错误接口,来返回错误信息。但是针对不同的访问方式,会有以下两种
Easter79 Easter79
4年前
SpringBoot+Redis+拦截器+自定义注解实现接口幂等性
一、概念任意多次执行所产生的影响均与一次执行的影响相同。按照这个含义,最终的含义就是对数据库的影响只能是一次性的,不能重复处理。比如:订单接口,不能多次创建订单。支付接口,重复支付同一笔订单只能扣一次钱。支付宝回调接口,可能会多次回调,必须处理重复回调。普通表单提交接口
liam liam
2年前
深入解析:Axios 请求如何取消?
在前端开发中,网络请求是非常常见的操作。而有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用发送请求时取消这些请求。基本概念在Axios中,取消请求的基本思路是创建一个用于取消的标记(ca
sum墨 sum墨
1年前
《优化接口设计的思路》系列:第六篇—接口防抖(防重复提交)的一些方式
所谓防抖,一是防用户手抖,二是防网络抖动。在Web系统中,表单提交是一个非常常见的功能,如果不加控制,容易因为用户的误操作或网络延迟导致同一请求被发送多次,进而生成重复的数据记录。要针对用户的误操作,前端通常会实现按钮的loading状态,阻止用户进行多次点击。而对于网络波动造成的请求重发问题,仅靠前端是不行的。为此,后端也应实施相应的防抖逻辑,确保在网络波动的情况下不会接收并处理同一请求多次。
程序员小五 程序员小五
1年前
融云IM干货丨 在IM服务中,如何优化接口调用以减少重复数据请求?
在IM服务中,优化API接口调用以减少重复数据请求可以采取以下几种策略:使用幂等设计:幂等性意味着一次或多次调用同一操作所产生的结果是一致的。通过设计幂等接口,可以有效防止由于网络抖动、用户误操作等原因产生的重复请求。具体实现方法包括在接口请求中引入唯一请