(javascript)为什么await在forEach中不生效?

转载:为啥await在forEach中不生效?-腾讯云开发者社区-腾讯云 (tencent.com)

两天要写循环遍历请求接口,于是就在forEach中用到了await,但是根本不是我想要的啊!

于是各种查,各种搜,终于有点明白了。先看段代码:

function test(){
  let arr =[3,2,1]
  arr.forEach(async item=>{
    const res = await fetch(item)    
    console.log("end")
  })
}

function fetch(x){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      revolve(x)
    }, 500*x)
  })
}

test();

期望打印出来顺序是:

3
2
1
end

然而打印顺序却是:

end
1
2
3

原因是forEach只支持同步代码

Pollyfill版本的forEach,简化以后类似于下面的伪代码:

while(index < arr.length){
  callback(item, index)
}

解决办法

方法一:Promise.all

async function test(){
  let arr = [3,2,1]
  await Promise.all(arr.map(async item=>{
    const res = await fetch(item);
    console.log(res)
  }))
  console.log("end")
}

async函数肯定会返回一个Promise对象,map返回一个存放Promise的数组。但是这样并不能保证fetch是按顺序完成的,如果想按顺序,请用下面的方法。

方法二:for ... of

async function test(){
  let arr =[3,2,1];
  for(const item of arr){
    const res = await fetch(item);
    console.log (res)
  }
  console.log("end")
}

function fetch(x){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(x)
    }, 1500*x)
  })
}

test();

因为for... of和forEach内部的机制不同,forEach是直接调用回调函数,for...of 是通过迭代器的方式去遍历的:

async function test(){
  let arr = [3,2,1];
  const iterator = arr[Symbol.iterator]()
  let res = iterator.next()
  while(!res.done){
    const value = res.value;
    const res1 = await fetch(value);
    console.log(res1);
    res.iterator.next();
  }
  console.log("end")
}

以上代码等价于for...of

参考文章:https://yuchengkai.cn/blog/2019-04-01.html#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%EF%BC%9F

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/767110.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot集成geode快速入门Demo

1.什么是geode&#xff1f; Apache Geode 是一个数据管理平台&#xff0c;可在广泛分布的云架构中提供对数据密集型应用程序的实时、一致的访问。Geode 跨多个进程汇集内存、CPU、网络资源和可选的本地磁盘&#xff0c;以管理应用程序对象和行为。它使用动态复制和数据分区技术…

【postgresql】索引

见的索引类型&#xff1a; B-tree 索引&#xff1a;这是最常用的索引类型&#xff0c;适用于大多数查询。B-tree索引可以高效地处理范围查询。 Hash 索引&#xff1a;适用于等值查询&#xff0c;但不支持范围查询。 GiST 索引&#xff1a;通用搜索树&#xff08;GiST&#xf…

Django学习第二天

启动项目命令 python manage.py runserver 动态获取当前时间 javascript实现数据动态更新代码 <script>setInterval(function() {var currentTimeElement document.getElementById(current-time);var currentTime new Date();currentTimeElement.textContent Curren…

基于Java废物回收机构管理系统详细设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

基于康养大模型和健康设备平台的智能蓝牙语音合成芯片VTX326

AI健康监护智能体是基于康养大模型和**智能语音芯片技术的健康设备平台&#xff0c;**旨在应对我国日益严峻的老龄化挑战。当前&#xff0c;中国总人口约为14.12亿&#xff0c;其中60周岁及以上老年人口占比19.8%&#xff0c;65周岁及以上老年人口占比14.9%&#xff0c;且老年人…

苹果p12证书最简单最新申请流程

使用uniapp打包&#xff0c;在ios上打正式包需要苹果的p12证书和证书profile文件&#xff0c;点进去uniapp的ios证书申请教程&#xff0c;通篇就是使用mac电脑申请的教程&#xff0c;假如没有mac电脑就无法继续了。 因此&#xff0c;假如没有mac电脑的同志们&#xff0c;可以参…

MATLAB—— 流程语句(1)

一、if elseif else end 语句 例子 x 88; % x表示成绩 if x>90 && x < 100 dj 1; % 等级为1级 elseif x>80 && x < 90 dj 2; % 等级为2级 elseif x>60 && x < 80 dj 3; % 等级为…

第4章 第一个程序

第4章 第一个程序 4.1 一个源程序从写出到执行的过程 第一步&#xff1a;编写汇编程序第二步&#xff1a;对源程序进行编译连接第三步&#xff1a;执行可执行文件中的程序 4.2.源程序 汇编语言中包含两种指令&#xff1a;汇编指令 和 伪指令 汇编指令&#xff1a;有对应机器…

中国国产AI芯片的崛起

一、CUDA的垄断 当讨论半导体行业面临的挑战时&#xff0c;你首先想到的是什么&#xff1f;光刻机&#xff1f;3纳米或者5纳米技术&#xff1f;我们无法生产的完美方形芯片&#xff1f;是的&#xff0c;但也不完全是。 人们经常把半导体芯片归类为硬件产业&#xff0c;但实际上…

C语言----文件操作

1.为什么使用文件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化…

递归(二)—— 初识暴力递归

如何理解暴力递归&#xff1f; 字面意思就是——“暴力的递归”&#xff0c;就是——“别纠结细节&#xff0c;开整&#xff08;递归&#xff09;&#xff01;” 暴力递归就是尝试。即&#xff1a;只要满足递归条件就不断的递归下去&#xff0c;直到达到base case&#xff0c…

力扣习题--哈沙德数

一、前言 本系列主要讲解和分析力扣习题&#xff0c;所以的习题均来自于力扣官网题库 - 力扣 (LeetCode) 全球极客挚爱的技术成长平台 二、哈沙德数 1. 哈沙德数 如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&…

LeetCode刷题之HOT100之除自身以外数组的乘积

2024 7/3 今天天气依旧很好&#xff0c;想起来做一题。 1、题目描述 2、算法分析 给定一个数组&#xff0c;要返回初自身以外数组的乘积。咋做呢&#xff1f;是的&#xff0c;我只能想到暴力解法&#xff0c;这不符合时间复杂度O(n)的要求&#xff0c;所以我只能看一下题解了…

零一万物: Yi Model API的使用

一、获取API Key 通过官方网址注册账号并且认证: 零一万物大模型开放平台 创建API Key 二、安装及调用 安装OpenAI SDK ​ 零一万物API 接口兼容 OpenAI 的 Python SDK&#xff0c;只需要简单配置即可使用。 安装 OpenAI SDK。请确保使用的 Python 版本至少为 3.7.1&a…

检索生成(RAG) vs 长文本大模型:实际应用中如何选择?

编者按&#xff1a;大模型的上下文理解能力直接影响到 LLMs 在复杂任务和长对话中的表现。本期内容聚焦于两种主流技术&#xff1a;长上下文(Large Context Windows)和检索增强生成(RAG)。这两种技术各有何优势&#xff1f;在实际应用中&#xff0c;我们又该如何权衡选择&#…

数据质量管理-可访问性管理

前情提要 根据GB/T 36344-2018《信息技术 数据质量评价指标》的标准文档&#xff0c;当前数据质量评价指标框架中包含6评价指标&#xff0c;在实际的数据治理过程中&#xff0c;存在一个关联性指标。7个指标中存在4个定性指标&#xff0c;3个定量指标&#xff1b; 定性指标&am…

【Windows】draw.io(免费的开源跨平台绘图软件)软件介绍

软件介绍 draw.io 是一款免费且易于使用的在线流程图绘图软件&#xff0c;后来更名为 diagrams.net。它最初作为一个基于 Web 的应用程序提供&#xff0c;支持用户创建各种类型的图表、流程图、网络图、组织结构图、UML 图等。它是完全免费的、强大的、专业的、易于使用的和高…

C++使用Poco库封装一个HTTP客户端类--Query参数

0x00 概述 我们使用Poco库的 Poco::Net::HTMLForm 类可以轻松实现表单数据的提交。 0x01 ApiPost提交表单数据 0x02 HttpClient类 #ifndef HTTPCLIENT_H #define HTTPCLIENT_H#include <string> #include <map> #include <Poco/URI.h> #include <Poco/N…

引领视觉基础模型新纪元! | 微软宣布开源Florence-2

01 模型介绍 &#x1f389;重大突破&#xff01;微软宣布开源Florence-2视觉基础模型&#xff0c;引领AI新纪元&#xff01;&#x1f680; Florence-2这一创新力作&#xff0c;以统一的提示为基础&#xff0c;跨越式地解决了计算机视觉与视觉语言领域的多样任务难题。从字幕生…

Hyper-V虚拟机固定IP地址(手把手教设置)

链接虚拟机修改网络配置文件 输入指令 sudo vi /etc/sysconfig/network-scripts/ifcfg-eth0 然后 输入 按 i 键 再按回车 (enter) 进入编辑模式 修改配置(这几项)其中 IPADDR 就是你想给虚拟机固定的 IP 地址 多台的话只需要修改这个IP 就行其他不变 BOOTPROTO=static…