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 ...
随机推荐
- setBounds方法,与setLayout(null)
首先把相关容器的布局方式设为 setLayout(null); 然后调用组件的 setBounds() 方法 设置button的位置为(100,100) 长宽分别为 60,25 jButton.se ...
- linux awk进阶篇
上一篇主要是awk的进本应用.本节是awk的进阶篇 ACTION:除去常用的print和printf还有以下几个 expression:表达式 如$1>3 control statements: ...
- Java通过 Scanner 类来获取用户的输入
通过 Scanner 类来获取用户的输入. import java.util.Scanner; Scanner s = new Scanner(System.in);// 从键盘接收数据 Syste ...
- mysql数据库终端上的增删改查及权限等相关操作
ctrl + c 终止 [linux] service mysql start 启动mysql service mysql stop 停止mysql service mysql restart 重启m ...
- cas的客户端应用是负载均衡,单点退出怎么办?
之前的项目一直是单节点,这次在生产系统中使用了负载均衡,一个应用部署了两个节点,负载均衡策略未知.这样在使用时发现了这么一个问题:在单点退出后,应用有时候可以退出,但有时还在登陆状态,这就很郁闷了. ...
- 告别编码5分钟,命名2小时!史上最全的Java命名规范参考!
简洁清爽的代码风格应该是大多数工程师所期待的.在工作中笔者常常因为起名字而纠结,夸张点可以说是编程5分钟,命名两小时!究竟为什么命名成为了工作中的拦路虎. 每个公司都有不同的标准,目的是为了保持统一, ...
- Java8 格式化时间
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss");LocalDateTime. ...
- The requested profile 'prod' could not be activated because it does not exist.
maven打包时警告:The requested profile 'prod' could not be activated because it does not exist. 需要在pom.xml ...
- 常用torch代码片段合集
PyTorch常用代码段整理合集 本文代码基于 PyTorch 1.0 版本,需要用到以下包 import collections import os import shutil import tqd ...
- Flask蓝图遇到的问题
欢迎加入python学习交流群 667279387 最近在使用flask开发一个业余学习项目,由于之前都是"小打小闹",整个程序都是放在一个文件夹里面的,也没有注意这个问题.这次项 ...