(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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《后端程序猿 · 基于 Lettuce 实现缓存容错策略》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; 近期刚转战 CSDN&#xff0c;会严格把控文章质量&#xff0c;绝不滥竽充数&#xff0c;如需交流&#xff…

机器学习辅助的乙醇浓度检测

目录 1.为什么要机器学习 2. 神经网络一般组成 3.BP神经网络工作过程 4.评价指标 5.实操代码 1.为什么要用机器学习 人工分析大量的谐振模式&#xff0c;建立各种WGM的响应与未知目标之间的关系&#xff0c;是一个很大的挑战。机器学习(ML)能够自行识别全谱的全部特征。作为…

如何在Lazada平台快速出单?测评助力商家突破销量瓶颈

Lazada在短短的几年里已经发展成了东南亚地区最大的在线购物网站之一 &#xff0c;很多商家也想要在这样一个大的跨境平台上发展。那么&#xff0c;对于希望在Lazada平台上大展拳脚的商家而言&#xff0c;出单是否容易呢? ​一、Lazada出单容易吗? Lazada出单的难易程度并非…

漫步5G-A City,一份独属于上海的浪漫

作家亨利詹姆斯曾写道&#xff0c;“城市漫步&#xff0c;让我接触到了这个世界上最好的东西”。 用漫无目的地行走&#xff0c;来体验和观察一座城市&#xff0c;上海凭借丰富多元的文化特质&#xff0c;成为citywalk这种浪漫生活方式的流行地。 无论你是漫步在美术馆、画廊林…

数据抓取技术在视频内容监控与快速读取中的应用

引言 在数字化时代&#xff0c;视频内容的快速读取和监控对于内容提供商来说至关重要。思通数科的OPEN-SPIDER抓取技术为这一需求提供了高效的解决方案。 OPEN-SPIDER技术概述 OPEN-SPIDER是思通数科开发的一种先进的数据抓取技术&#xff0c;它能够&#xff1a; - 高效地从各…

ananconda 和 pip傻傻分不清???

Anaconda 和 pip 都是 Python 编程语言中用于管理包&#xff08;libraries&#xff09;和环境的工具&#xff0c;但它们在功能和设计理念上有所不同。 Anaconda Anaconda 是一个面向科学计算的发行版&#xff0c;包括了 Python 语言和许多常用的科学计算及数据分析库。Anacon…

Stable Diffusion【基础篇】:降噪强度(denoising strength)

提到降噪强度&#xff08;denoising strength&#xff09;&#xff0c;大家一定不会陌生&#xff0c;这个参数是图生图中最关键的参数之一。今天在Stable Diffusion Art网站看到一篇介绍降噪强度&#xff08;denoising strength&#xff09;的文章&#xff08;地址&#xff1a;…

uniapp返回上一页并传递参数,上一页接收参数并刷新数据

因为navigateBack不支持携带参数&#xff0c;所以只能触发一个自定义事件&#xff0c;并传递参数 params 给上一页。 // 触发自定义事件&#xff0c;并返回上一页 uni.$emit(refreshPreviousPage, params); //返回上一页 uni.navigateBack({ delta: 1 }); 在上一页的 onShow …

vcanfd配置与使用

canfd CAN FD (Controller Area Network Flexible Data-rate) 是传统 CAN (Controller Area Network) 的升级版本&#xff0c;旨在满足现代汽车电子系统和工业自动化中对更高数据速率和更大数据负载的需求。以下是对 CAN FD 的详细介绍&#xff1a; CAN 和 CAN FD 的背景 CA…

从hugging face 下模型

支持国内下载hugging face 的东西 下模型权重 model_id 是红色圈复制的 代码 记得设置下载的存储位置 import os from pathlib import Path from huggingface_hub import hf_hub_download from huggingface_hub import snapshot_downloadmodel_id"llava-hf/llava-v1…

C#——MD5 base64加密-base64加密解密

MD5 base64加密 在C#中&#xff0c;MD5是一个不可逆的加密算法&#xff0c;因为它是散列函数&#xff0c;用于创建信息的唯一指纹&#xff08;也称为摘要&#xff09;。不过&#xff0c;可以使用MD5进行加密&#xff0c;然后使用Base64对结果进行编码。但是&#xff0c;请注意…

[AI Perplexica] 深入解析,AI 架构揭秘

[AI Perplexica] AI驱动的开源搜索引擎 上一篇文章&#xff0c;我们对 Perplexica 做了个基本介绍&#xff0c;包括特点&#xff0c;以及如何安装。 今天&#xff0c;我们来深入看下 Perplexica 的架构。 Perplexica 的架构 Perplexica 的架构由以下关键组件组成&#xff1…

(2024)docker-compose实战 (8)部署LAMP项目(最终版)

前言 在前一篇文章中, 我们已经搭建LAMP环境, 但php没有安装扩展, 这篇文章将安装PHP扩展, 实现正常的PHP项目部署我在git中查找到一个简易安装PHP扩展的方法(GitHub - mlocati/docker-php-extension-installer: Easily install PHP extensions in Docker containers).通过这个…

MySQL 忘记了密码怎么办?

如果 MySQL 普通账户忘记了密码&#xff0c;很容易解决&#xff0c;可以通过登录 root 账户来重置普通账户密码。然而&#xff0c;如果 root 账户的密码也忘记或丢失了&#xff0c;该怎么办呢&#xff1f; 这篇文章将教你如何重置 root 账户密码&#xff0c;亲测有效。 版本&…

【Python机器学习】模型评估与改进——二分类指标

目录 1、错误类型 2、不平衡数据集 3、混淆矩阵 与精度的关系。 准确率、召回率与f-分数 分类报告 4、考虑不确定性 5、准确率-召回率曲线 6、受试者工作特征&#xff08;ROC&#xff09;与AUC 二分类可能是实践中最常见的机器学习应用&#xff0c;也是概念最简单的应…

云原生之容器编排实践-OpenEuler23.09在线安装Kubernetes与KubeSphere

背景 前几篇文章中介绍了如何将 ruoyi-cloud 项目部署到 Kubernetes 集群中&#xff0c;包括网关服务、认证服务和系统服务并且对全部服务采用 YAML 文件的方式来进行部署&#xff0c;这虽然有助于理解 K8S 组织管理资源的风格与底层机制&#xff0c;但是对于团队中不太熟悉命…

代码随想录算法训练营第21天|LeetCode 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

1.LeetCode 669. 修剪二叉搜索树 题目链接&#xff1a;https://leetcode.cn/problems/trim-a-binary-search-tree/description/ 文章链接&#xff1a;https://programmercarl.com/0669.修剪二叉搜索树.html 视频链接&#xff1a;https://www.bilibili.com/video/BV17P41177ud?…

【网络】网络基础(一)

网络基础&#xff08;一&#xff09; 文章目录 一、计算机网络背景1.1网络发展1.2认识“协议” 二、网络协议初识2.1OSI七层模型2.2OSI五层模型 三、网络传输基本流程3.1局域网通信3.2网络传输流程不跨子网的网络传输跨子网的网络传输 3.3网络中的地址管理IP地址MAC地址 一、计…

Kotlin中的数据类型

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

算法训练 | 图论Part1 | 98.所有可达路径

目录 98.所有可达路径 深度搜索法 98.所有可达路径 题目链接&#xff1a;98. 所有可达路径 文章讲解&#xff1a;代码随想录 深度搜索法 代码一&#xff1a;邻接矩阵写法 #include <iostream> #include <vector> using namespace std; vector<vector<…