记录一次循环异步请求的'bug'

最新推荐文章于 2022-11-26 21:15:52 发布
原创 最新推荐文章于 2022-11-26 21:15:52 发布 · 207 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了一段代码中出现的问题，即循环发送10次异步请求时，所有请求的参数都错误地使用了最后一次循环的参数值。分析了问题产生的原因，并提出了多种解决方案，包括将异步改为同步、使用let替代var、采用foreach循环、利用闭包或async/await等。
背景

有这么一段代码，循环发送10次异步请求，请求以每次的下标为参数。

for (var i=0; i<10; i++) {
	ajax({
		url: '/api/xxx?index' + i
	})
}

结果10次请求的url都是：api/xxx?index=9，也就是说，10次请求都把最后一次请求的参数当参数。

原因

for循环执行完毕，再执行10次异步请求，这个时候的i已经是9了，那么这10次请求的参数都是一样的了。

解决思路

把异步改成同步或者…
var改成let或者…
foreach或者…
闭包(function (i) { ajax })(i)或者…
aync await

C#基于任务的异步模式开发教程
lweiyue的专栏
07-01 825
任务一般是一些比较耗时的操作（IO或者复杂计算），如果在主线程运行，将影响程序的流畅性。所以，我们一般会新建线程处理任务。.NET4开始引进了Task，它对Thread做了大量方便易用的封装。我们将详细讲述Task的使用方法，以及各种多线程的使用场合。 一、任务设计 1.1基本设计 一个简单的耗时操作如下所示： void Func1() { Thread.Sleep(1000); } 如果有返回值，将如下所示： int Func2() { Thread.Sleep(1500.
forEach中的异步请求引发的bug
weixin_40082785的博客
02-26 794
昨天遇到一个有意思的bug，代码在本地跑的时候是没有问题的，部署到测试环境之后就出现问题了。 Bug说明： 组件中有一个导入全部的功能，点击后该组件将会把可导入项目放进文本域中，点击提交后请求接口写入数据。 2.提示导入成功后重新打开导入的对话框发现还有部分可以导入，并且再出导入成功，后续删除也确认是需要删除两次才能完全删除。 debug： 检查完前端组件确认写法没有问题后，开始检查接口的问题。 最后发现我写了一个类似下段代码的操作 let arr = [1, 2, 3] let
在循环中发送请求
Yannis的技术之路
04-10 3333
我们在前端开发的时候有时候会用到在loop中发送请求的情况。例如： for(var i = 0; i < 100; i++){ //此处根据i的值循环发送同样的请求，只是参数依赖于i }  在使用的时候 我们会发现获取的数据，不是我们想要的。 原因：i值在整体走完后才发送请求。 解决方案： for(var i = 0; i < 100; i++){
extjs 循环执行多个异步请求时，参数和后台以及相关问题和衍生问题的处理
秋小鬼的博客
10-24 1880
extjs ajax 异步 多次
循环发送ajax请求的解决方法
热门推荐
yuan882696yan的专栏
12-14 3万+
今天需要用js 循环发送ajax请求，获取信息， 一开始，就直接按照逻辑写， for(var i=0; i<items.length; i++){ api_url = items[i].url; console.log(i); $.ajax({ type: 'get', url: api_url, dataType: "json", async: false, suc
【Javascript】分享一个异步请求问题导致的bug以及解决方法(Array.map Array.foreach 中 async/await 写法无效)
Daivon_Up的博客
01-18 845
https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404 Array.foreach、 Array.map 中的async/await写法 会失效 ,可使用Promise+Array.map 或者P romise + for循环代替 if(res.code === 10000){ res.data = ...
项目实训记录（十）——axios循环发送请求顺序执行
pinkray_c的博客
06-04 2019
2.1 出现问题：axios循环发送请求并没有按顺序执行 2.1.1 错误代码 2.1.2 代码实现逻辑 2.1.3 　出错信息 2.2　解决过程分析 2.2.1　错误部分 2.2.2　解决await在forEach不起作用 2.2.3　解决方法内axios通信顺序问题 ......
解决vue v-for渲染的异步请求数据无法使用better-scroll插件滚动问题
cyj5201314的博客
02-08 1166
背景 使用better-scroll插件实例化滚动列表，但列表中的数据是异步请求，有时列表中数据还没有渲染完成，插件就已经实例化导致bug，解决问题的根源在于令dom全部渲染完成后再实例化插件 最简单的方法就是设置定时器，等待一定时间再实例化插件，但这种方法容易浪费时间等待或者等待时间不足仍然导致bug 较好的解决方法就是watch+vm.nextTick nextTich: 在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM $nextTick 里面DOM.
vue-swiper组件化：解决异步请求数据时swiper过早初始化问题：
YY的博客
11-26 1839
vue-swiper组件化：解决异步请求数据时swiper过早初始化问题：
解决bug记录
Jchn lau
08-12 823
每次查bug最头痛的就是，不知道如何复现，或者说是这个bug是如何操作才触发的。   偶发bug主要触发条件： 某个时间 某个操 指针越界导致其他对象内存被修改 ...等等   解决bug几点看法： 首先要跟踪发生bug时的数据，最直观的就是查程序运行异常日志。大部分的问题都可以通过查看异常日志找到思路。 其次就是查看最近程序修改记录，跟进修改过的代码是否可能导致当前的bug发生...
ajax请求接口，在for循环中处理返回参数
digua523的博客
12-10 5619
1.处理情况：返回数据result为数组类型，且读取数据为动态，不知道key值。循环遍历数组中的key与value。 function getdata(){ //在函数内定义变量，不加var声明，默认为全局变量 user=new Array(); userva=new Array(); $.ajax( url:"", //请求接口地址 type:"get", //接口请求类型
RxJava—操作符（过滤、合并、转换）
会飞的鱼~的博客
12-07 8061
RxJava—过滤、合并、转换，Observable的常用操作符讲述，提供免费demo下载。
Android实现无限轮询（Rxjava篇）
xiangyihu的专栏
12-10 4522
第一步 封装轮询函数 private Disposable test(){ return Flowable.interval(2,1, TimeUnit.SECONDS) // 参数说明： // 参数1 = 第1次延迟时间； // 参数2 = 间隔时间数字； // 参数3 = 时间单位； ...
日常复杂bug修改记录
qq_32114025的博客
10-18 627
操作步骤：1.查看plug电量图表                   2.删除电量后查看电量图表，切换当天，当月，当年                   3.添加多个plug 预期结果：数据正确 实际结果：1.电量图表折线之前的两个点未连接，有时0.00显示为-0.00，并且电量总量不是各时间点/日/月总和，而是最新数据                   2.切换数据错误，当月显示...
在for循环中依次执行异步操作
u010007013的博客
11-17 5477
上一篇文章写了使用Promise进行异步操作：使用Promise来进行异步操作。 这适用于单条数据的处理场景，如果是在for循环中处理多条数据，依次处理每条数据的异步操作呢？ 思路：还是利用Promise的then()来进行链式操作，每次循环的时间往Promise后添加一个新的then(),这样就可以保证上一个数据的异步操作执行完毕再执行下一个数据的异步操作。 示例代码： const promis...
关于rxjava的循环请求
m0_37303899的博客
06-08 8750
mFetIceServerTask = Observable.interval(0, 10, TimeUnit.SECONDS) .observeOn(AndroidSchedulers.mainThread()) .takeUntil(new Func1, Boolean>() { @Override public
for循环中嵌套异步请求问题
06-04 1191
for循环中嵌套了异步请求会导致顺序错乱，用递归代替for循环，可以保证正常执行顺序： 转载于:https://www.cnblogs.com/wstmljf/p/10973685.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值