foreach的异步(async,await)的问题及其处理方式
开发中遇见个难题很苦恼,好在我解决了,只要能解决我就很开心
本篇文章从forEach方法 到promise 到async await统统理解个遍,进入正题
先看下面代码会出现什么问题:
const arr = [1,2,3,4,5,6];
const result = [];
const fn = (item) => {
let time = Math.ceil(Math.random()*1000)
return new Promise(resolve => {
setTimeout(() => {
resolve(item)
}, time);
})
}
arr.forEach(async (item) => {
const val = await fn(item);
result.push(val);
console.log(result);
})
输出结果顺序,看随机数的脸色。 可能是[6, 5, 4, 1, 3, 2] 或者 [3, 5, 4, 6, 1, 2] 或者等等。。。。。。。
const result1 = [];
(async()=>{
for(let i = 0; i < arr.length; i++){
const val1 = await fn(arr[i]);
result1.push(val1);
}
//在这里拿到执行结果result,再执行依赖result的代码
console.log(result1);
})();
这个结果妥妥的解决了,得到的顺序是 [1, 2, 3, 4, 5, 6],知道为啥吗?你要知道那你可以走了 拜拜
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback, thisArg) { var T, k; if (this == null) {
throw new TypeError(' this is null or not defined');
} // 1. Let O be the result of calling toObject() passing the
// |this| value as the argument.
var O = Object(this); // 2. Let lenValue be the result of calling the Get() internal
// method of O with the argument "length".
// 3. Let len be toUint32(lenValue).
var len = O.length >>> 0; // 4. If isCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function');
} // 5. If thisArg was supplied, let T be thisArg; else let
// T be undefined.
if (arguments.length > 1) {
T = thisArg;
} // 6. Let k be 0
k = 0; // 7. Repeat, while k < len
while (k < len) { var kValue; // a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty
// internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) { // i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k]; // ii. Call the Call internal method of callback with T as
// the this value and argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}
看完你会发现:
async function fn2 (){
let val2 = await fn(1);
console.log(val2)
}; async function fn3 (){
let val3 = await fn(2);
console.log(val3)
};
fn2();
fn3();
foreach的异步(async,await)的问题及其处理方式的更多相关文章
- JavaScript是如何工作的:事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式!
摘要: 深度理解JS事件循环!!! 原文:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! 作者:前端小智 Fundebug经授权转载, ...
- [每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...
- 为什么 array.foreach 不支持 async/await
一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...
- 我也来说说C#中的异步:async/await
序 最近看了一些园友们写的有关于异步的文章,受益匪浅,写这篇文章的目的是想把自己之前看到的文章做一个总结,同时也希望通过更加通俗易懂的语言让大家了解"异步"编程. 1:什么是异步 ...
- Python 进阶 异步async/await
一,前言 本文将会讲述Python 3.5之后出现的async/await的使用方法,我从上看到一篇不错的博客,自己对其进行了梳理.该文章原地址https://www.cnblogs.com/dhcn ...
- 异步 async & await
1 什么是异步 异步的另外一种含义是计算机多线程的异步处理.与同步处理相对,异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程. 2 异步场景 l 不 ...
- 异步async/await简单应用与探究
感谢Marco CAO指出的两点错误,已做出修改与补充 异步函数(async/await)简单应用 .NET Framework4.5提供了针对异步函数语法糖,简化了编写异步函数的复杂度. 下面通过一 ...
- C#Framework4.0支持异步async/await语法
由于用户使用的是XP系统,但是程序里异步都是通过async/await代码来实现的,然而async/await需要Framework4.5版本才可以,而XP系统最高只能支持到Framework4.0, ...
- .Net Core异步async/await探索
走进.NetCore的异步编程 - 探索 async/await 前言: 这段时间开始用.netcore做公司项目,发现前辈搭的框架通篇运用了异步编程方式,也就是async/await方式,作为一个刚 ...
- JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!
为什么单线程是一个限制? 在发布的第一篇文章中,思考了这样一个问题:当调用堆栈中有函数调用需要花费大量时间来处理时会发生什么? 例如,假设在浏览器中运行一个复杂的图像转换算法. 当调用堆栈有函数要执行 ...
随机推荐
- 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少
在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替 1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方(如果你的全局状态特别的多记得要 ...
- Keil 5(Keil C51)安装与注册 [ 图文教程 ]
前言 Keil C51 是 51 系列兼容单片机 C 语言软件开发系统,支持 8051 微控制器体系结构的 Keil 开发工具,适合每个阶段的开发人员,不管是专业的应用工程师,还是刚学习嵌入式软件开发 ...
- shell基础命令知识持续更新
查看系统支持的shell cat /etc/shells [root@iZwz9almo8p830btq7voo9Z shellLearning]# cat /etc/shells /bin/sh / ...
- Sublime下运行javascript,并带彩色提示
最近和各种同事磨合技术,自闭中~ 首先让JS在Sublime上运行 去下载Node.js并且安装 安装完成后 cmd 输入 node -v 查看安装是否成功. 接着打开Sublime - 工具 > ...
- 浅谈JS词法环境
JavaScript 词法环境 本文主要讲解JS词法环境,我们将看到什么是词法环境,词法范围如何工作,函数内部的名称如何解析,内部属性,弄清楚词法环境利于我们理解闭包.让我们开始吧... 什么是词法环 ...
- 一把梭:REST API 全用 POST(转载)
一把梭:REST API 全用 POST(转载) 原文链接: https://coolshell.cn/articles/22173.html 写这篇文章的原因主要还是因为V2EX上的这个贴子,这个贴 ...
- 函数传参 Java JavaScript python 都是按值传递的
实验代码如下: Java python JavaScript:
- ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件
出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...
- SQLSERVER 语句交错引发的死锁研究
一:背景 1. 讲故事 相信大家在使用 SQLSERVER 的过程中经常会遇到 阻塞 和 死锁,尤其是 死锁,比如下面的输出: (1 row affected) Msg 1205, Level 13, ...
- P5491 【模板】二次剩余
\(\text{Summary}\) 实际上是做法的归纳 一切皆是结论性的,没有证明! 模 \(p\) 意义下的二次剩余有 \(\frac{p-1}2\) 个,二次非剩余也恰有那么多 考虑解关于 \( ...