开发中遇见个难题很苦恼,好在我解决了,只要能解决我就很开心

本篇文章从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] 或者等等。。。。。。。

 那么问题来了
 问题1: 我想在这个forEach执行完之后怎么按arr的顺序得到结果
 问题2: 怎么等所有异步执行完成拿到result,再执行以后的代码。
 今天就伴随这俩问题我们开始整
        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],知道为啥吗?你要知道那你可以走了 拜拜

 接着来, 我们不是未来解决问题而解决问题。接下来就要搞清楚forEach为啥不行
 
 看下forEach的实现源码:
 
     // 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
};
}

看完你会发现:

forEach每次执行都会执行一个回调函数,是不是听不大明白,举个例子
            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的回调函数就好比这样,这个很容易看懂fn2和fn3肯不是同步关系,要想同步必须在一个函数。
 
至此已经结束了。当然还有其他解决方案 有时间接着整理

  

foreach的异步(async,await)的问题及其处理方式的更多相关文章

  1. JavaScript是如何工作的:事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式!

    摘要: 深度理解JS事件循环!!! 原文:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! 作者:前端小智 Fundebug经授权转载, ...

  2. [每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...

  3. 为什么 array.foreach 不支持 async/await

    一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...

  4. 我也来说说C#中的异步:async/await

    序 最近看了一些园友们写的有关于异步的文章,受益匪浅,写这篇文章的目的是想把自己之前看到的文章做一个总结,同时也希望通过更加通俗易懂的语言让大家了解"异步"编程. 1:什么是异步 ...

  5. Python 进阶 异步async/await

    一,前言 本文将会讲述Python 3.5之后出现的async/await的使用方法,我从上看到一篇不错的博客,自己对其进行了梳理.该文章原地址https://www.cnblogs.com/dhcn ...

  6. 异步 async & await

    1 什么是异步 异步的另外一种含义是计算机多线程的异步处理.与同步处理相对,异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程. 2 异步场景 l  不 ...

  7. 异步async/await简单应用与探究

    感谢Marco CAO指出的两点错误,已做出修改与补充 异步函数(async/await)简单应用 .NET Framework4.5提供了针对异步函数语法糖,简化了编写异步函数的复杂度. 下面通过一 ...

  8. C#Framework4.0支持异步async/await语法

    由于用户使用的是XP系统,但是程序里异步都是通过async/await代码来实现的,然而async/await需要Framework4.5版本才可以,而XP系统最高只能支持到Framework4.0, ...

  9. .Net Core异步async/await探索

    走进.NetCore的异步编程 - 探索 async/await 前言: 这段时间开始用.netcore做公司项目,发现前辈搭的框架通篇运用了异步编程方式,也就是async/await方式,作为一个刚 ...

  10. JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!

    为什么单线程是一个限制? 在发布的第一篇文章中,思考了这样一个问题:当调用堆栈中有函数调用需要花费大量时间来处理时会发生什么? 例如,假设在浏览器中运行一个复杂的图像转换算法. 当调用堆栈有函数要执行 ...

随机推荐

  1. 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少

    在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替 1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方(如果你的全局状态特别的多记得要 ...

  2. Keil 5(Keil C51)安装与注册 [ 图文教程 ]

    前言 Keil C51 是 51 系列兼容单片机 C 语言软件开发系统,支持 8051 微控制器体系结构的 Keil 开发工具,适合每个阶段的开发人员,不管是专业的应用工程师,还是刚学习嵌入式软件开发 ...

  3. shell基础命令知识持续更新

    查看系统支持的shell cat /etc/shells [root@iZwz9almo8p830btq7voo9Z shellLearning]# cat /etc/shells /bin/sh / ...

  4. Sublime下运行javascript,并带彩色提示

    最近和各种同事磨合技术,自闭中~ 首先让JS在Sublime上运行 去下载Node.js并且安装 安装完成后 cmd 输入 node -v 查看安装是否成功. 接着打开Sublime - 工具 > ...

  5. 浅谈JS词法环境

    JavaScript 词法环境 本文主要讲解JS词法环境,我们将看到什么是词法环境,词法范围如何工作,函数内部的名称如何解析,内部属性,弄清楚词法环境利于我们理解闭包.让我们开始吧... 什么是词法环 ...

  6. 一把梭:REST API 全用 POST(转载)

    一把梭:REST API 全用 POST(转载) 原文链接: https://coolshell.cn/articles/22173.html 写这篇文章的原因主要还是因为V2EX上的这个贴子,这个贴 ...

  7. 函数传参 Java JavaScript python 都是按值传递的

    实验代码如下: Java python JavaScript:

  8. ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件

    出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...

  9. SQLSERVER 语句交错引发的死锁研究

    一:背景 1. 讲故事 相信大家在使用 SQLSERVER 的过程中经常会遇到 阻塞 和 死锁,尤其是 死锁,比如下面的输出: (1 row affected) Msg 1205, Level 13, ...

  10. P5491 【模板】二次剩余

    \(\text{Summary}\) 实际上是做法的归纳 一切皆是结论性的,没有证明! 模 \(p\) 意义下的二次剩余有 \(\frac{p-1}2\) 个,二次非剩余也恰有那么多 考虑解关于 \( ...