javascript for循环+异步请求导致请求顺序不一致
工作中遇到一个问题
for循环,再把循环出来的ID再进行二次请求
这就导致一个问题
请求结果返回顺序不一致
原因:异步请求会把回调事件放入微任务事件队列,宏任务执行完毕再执行微任务,具体参考事件队列机制
解决方法:
通过map方法进行循环请求
将异步请求方法封装起来,返回一个promise
这样将会返回一个具有多个promise的数组
通过promise.all()方法把promise包装成一个新的promise实例
// 通过Promise把所有的异步请求放进事件队列中
getInfo(item ,index) {
const ms = 1000 * Math.ceil(Math.random() * 3)
return new Promise((resolve,reject) => {
setTimeout(() => {
axios.get(id).then((result) => {
resolve(result)
})
}, ms)
})
} // 返回多个promise
let promise = arr.map((item,index) = > {
arr.forEach((item, index) => {
return getInfo(item, index)
})
})
// 对返回的promise数组进行操作
Peomise.all(promise).then((allData) => {
arr.forEach((item, index) => {
// ......
})
})
javascript for循环+异步请求导致请求顺序不一致的更多相关文章
- for循环中进行联网请求数据、for循环中进行异步数据操作,数据排序错乱问题解决;
for循环中进行联网请求数据,由于网络请求是异步的,第一个网络请求还没有回调,第二次第三次以及后续的网络请求又已经发出去了,有可能后续的网络请求会先回调:这时我们接收到的数据的排序就会错乱:怎么才能让 ...
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- 使用async-http-client实现异步批量http请求
最近项目中需要在微服务中调用rest接口,而且需要调用得次数很多,所以同步得http客户端已经不满足要求,在网上查阅资料后发现了async-http-client这个包得性能不错,所以写了个demo测 ...
- 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- 关于HTTP请求、Ajax请求,请求的同步和异步
使用了很长时间的Ajax请求了,一直都是在以异步的方式在使用.昨天听了一个讲座涉及到apache server,偶然想到了这Ajax请求和HTTP请求的一些区别和联系,就在网上好好搜了一顿,把搜到的结 ...
- 关于web资金系统提现安全保护,防止极快的重复并发请求导致重复提现的解决思路
关于WEB金融系统中的提现安全问题很多人没有深入思想,导致有漏洞,常常会遇到有些人遇到被攻击到导资金损失的麻烦, 其实要彻底解决重复并发请求 导致重复提现问题,是需要花点心思的,并没有看起来的 ...
- 纯js异步无刷新请求(只支持IE)【原】
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
两种请求在请求的Header不同,Ajax 异步请求比传统的同步请求多了一个头参数 1. 传统同步请求参数 accept text/html,application/xhtml+xml,applica ...
随机推荐
- [UWP]UIElement.Clip虽然残废,但它还可以这样玩
1. 复习一下WPF的UIElement.Clip 用了很久很久的WPF,但几乎没有主动用过它的Clip属性,我只记得它很灵活,可以裁剪出多种形状.在官方文档复习了一下,大致用法和效果如下: < ...
- java 数组注意细节,例子解析
1. int x[]; 或int [] x; 此时却无物理的存在数组.需:数组名= new 数组元素类型[size]: a = new int [10]; 2. 不能使用任何未初始化的数组. 默认的初 ...
- 《Windows内核安全与驱动开发》阅读笔记 -- 索引目录
<Windows内核安全与驱动开发>阅读笔记 -- 索引目录 一.内核上机指导 二.内核编程环境及其特殊性 2.1 内核编程的环境 2.2 数据类型 2.3 重要的数据结构 2.4 函数调 ...
- SpringBoot系列之集成jsp模板引擎
目录 1.模板引擎简介 2.环境准备 4.源码原理简介 SpringBoot系列之集成jsp模板引擎 @ 1.模板引擎简介 引用百度百科的模板引擎解释: 模板引擎(这里特指用于Web开发的模板引擎)是 ...
- 一个缓存使用案例:Spring Cache VS Caffeine 原生 API
最近在学习本地缓存发现,在 Spring 技术栈的开发中,既可以使用 Spring Cache 的注解形式操作缓存,也可用各种缓存方案的原生 API.那么是否 Spring 官方提供的就是最合适的方案 ...
- Date、Calendar和GregorianCalendar的使用
java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 第一个构造函数使用当前日期和时间来初始化对象. Date public st ...
- 了解 MongoDB 看这一篇就够了【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 华为OSPF与ACL综合应用实例讲解
OSPF与ACL综合应用实例讲解 项目案例要求: 1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R1.R2.R3只允许被IT登录管理:4 ...
- Sql Server连表查询字段为null
这是一个坑,并且是有毒的坑. 一不小心我就掉进了这个坑里面,费了好大的力气这才从坑里面爬出来. 话不多说,开始吹BB啦. 一.简单说说遇到的问题: 连表查询,一对多. 出现 int, smallda ...
- shell 替换文本中的某个符号为换行符
替换后为: 0.06774 脚本: :%s/,"/\r/g