php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过

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

前端开发中，会涉及很多异步事件处理，页面展示的处理关系最密切的就是loading图层，但是loading交互在一些时候会不太友好，后端同学也不喜欢loading状态(后端同学：这不就是说我的接口返回慢嘛？我的锅！)

前端函数节流防抖也是一个解决方法，但是又有一个问题是，我们处理的是异步，只要有异步就会有等待，比如，防抖时间是1s，异步事件触发了两次，就需要最快2s完成，假设第一次异步3s返回，第二次异步0.5秒返回；那出现的情况就是，第一次触发的3s异步，1s内没有返回，1s后第二次触发异步，第一次的异步还没有返回，第二次的异步就就开始了，0.5秒后第二次异步返回了，但是最终结果响应的是第一次的异步。

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

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为请求参数

});

/*.....*/

})

php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过相关推荐

axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
app.vue只执行一次吗_面包可以只发酵一次吗？
今天继续讲发酵.在我们讲判断发酵程度这种细节问题之前,我想先把一些大的.理论方面的问题给大家理顺清楚,这样对整个发酵过程的判断有利无害. 在接触面包制作初始,我看到的菜谱就全部是使用2次发酵的方法来制 ...
c语言中执行一次的函数once,iOS只执行一次的方法
IOS开发(64)之GCD任务最多只执行一次 1 前言使用 dispatch_once 函数在 APP 的生命周期内来保证你想确保每段代码只执行一次,即使它在代码的不同地方多次调用(比如单例的初始 ...
利用闭包实现多次ajax请求只执行最后一次
点一个按钮,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待.我们知道一般我们用ajax是异步请求,那么我们快速重复点击一个按钮得到的结果其实我们并不知道是哪次点击的结果可能是第一次可能 ...
winform 让他间隔一段时间执行事件且只执行一次_Redis 事件机制详解
点击上方"程序员历小冰",选择"置顶或者星标" 你的关注意义重大! Redis 采用事件驱动机制来处理大量的网络IO.它并没有使用 libevent 或者 li ...
服务网关zuul之二：过滤器--请求过滤执行过程（源码分析）
Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求. 审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成 ...
防抖函数：多次触发后只执行第一次或者最后一次的函数
一. 应用场景当前问题: 现在点击一个按钮,然后会向服务器请求一次数据.如果暴力操作,不断的点击按钮,那么就会一直向服务器请求,这样肯定不好,需要应用到防抖函数. 最终目的:多次触发只执行最后一次或 ...
node编写定时任务，for循环只执行一遍的解决办法
在用node编写定时任务时候,发现for循环只执行i=0这一次,就不接着循环执行了,下面贴上代码: exports.task = async function(ctx){ let { app } = ...
scheduled线程池ScheduledExecutorService只执行一次_有个定时任务突然不执行了
scheduled线程池ScheduledExecutorService只执行一次_有个定时任务突然不执行了原因 If any execution of the task encounters an ...

php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过

php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过相关推荐

最新文章

热门文章