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

本篇文章从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. DVWA系列2:SQL Injection

    DVWA系列2:SQL Injection 前言 SQL 注入是比较常见的攻击类型,之前一直听说过,也尝试看过一些教程,但其中的单引号,字符串拼接等感觉有点抽象,不知道为什么要这么做.这次就使用 DV ...

  2. post方法易错地方

    <body> <h1>登录</h1> <input type="text" placeholder="请输入用户名" ...

  3. drf-day2——restful规范、序列化反序列化、基于django编写五个原生接口、drf介绍和快速使用、cbv源码分析

    目录 一.restful规范(重要,不难) 概念 十个规范 二.序列化反序列化 三.基于django原生编写5个接口 四.drf介绍和快速使用 概念 安装 代码 五.cbv源码分析 六.作业 1.使用 ...

  4. P23_列表渲染

    列表渲染 wx:for 通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: 默认情况下,当前循环项的索引用 index 表示:当前循环项用 item 表示. 手动指定索引和 ...

  5. 推荐系统[一]:超详细知识介绍,一份完整的入门指南,解答推荐系统相关算法流程、衡量指标和应用,以及如何使用jieba分词库进行相似推荐

    1. 推荐算法的初步理解 如果说互联网的目标就是连接一切,那么推荐系统的作用就是建立更加有效率的连接,推荐系统可以更有效率的连接用户与内容和服务,节约了大量的时间和成本. 1.1 推荐系统主要解决问题 ...

  6. 队列——queue的用法(及洛谷B3616)

    队列的概念 在说队列之前,先回忆一下栈是什么,我们一般说栈是一个先进后出的数据结构,而队列就是先进先出的数据结构. 队列是定在表的一端进行插入,表的另一端进行删除. 通常,我们称进数据的一端为队尾,出 ...

  7. C# System.Threading.Timer 详解及示例

    前言 定时器功能在日常开发中也是比较常用的,在 .Net 中实际上总共有五种定时器,分别是:System.Timers.Timer.System.Threading.Timer.System.Wind ...

  8. Trie 的一类应用

    \(\text{Trie}\) 先从 [十二省联考 \(2019\)] 异或粽子 谈起 不难想到堆加可持久化 \(Trie\) 的做法 这就和 \(\text{[NOI2010]}\) 超级钢琴 类似 ...

  9. Cobalt Strike 之: Malleable C2 流量伪造与加密

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. 目录 ...

  10. 原子类Atomic

    前言 非阻塞算法:如果在某种算法中,一个线程的失败或挂起不会导致其他线程也失败或挂起,那么这种算法就被称为非阻塞算法.如果在算法的每个步骤中都存在某个线程执行下去,那么这种算法也被称为无锁(Lock_ ...