JavaScript

2023-03-30 23:28| 来源: 网络整理| 查看: 265

记录比较低级但是却踩了的坑

原因是 forEach 是同步遍历，最后用Promis.all()解决了异步遍历的情况。

Promise.all()介绍

Promise.all(iterable) 此方法在集合多个 promise 的返回结果时很有用方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

抄自 MDN Promise.all()

使用

首先有一个异步的函数：

function sleep() { return new Promise((resolve, reject) => { setTimeout(() => { resolve() }, 1000) }) }

情境一：直接在循环里调用异步函数

async function withoutPromiseAll() { [1，2，3，4，5].forEach(async (item) => { await sleep(1) console.log(item) }) console.log('完成') } withoutPromiseAll() // 这里的执行结果是： // 完成 // 1 // 2 // 3 // 4 // 5 // 以上数据基本同时依次打印出来

情境二：循环里收集异步函数，最后用Promise.all()执行

async function promiseAll() { let promiseArr = [] arr.forEach(item => { promiseArr.push((async (item) => { await sleep(1) console.log(item) })(item)) }) await Promise.all(promiseArr) console.log('完成') } promiseAll() // 这里的执行结果是： // 完成 // 1 // 2 // 3 // 4 // 5 // 以上数据间隔 1s 逐个打印出来以下是啰嗦踩坑过程，可忽略：

业务背景

TreeView 做子节点的懒加载，懒加载的处理函数中，要组织节点自己的数据，组织数据的过程中需要循环某部分数据，而循环时候在对item的处理中，涉及到了异步的操作，就是出现了循环 + 异步的操作。

问题现象

循环方法用的是forEach，现象就是，点击节点节点的时候，并没有得到理想的子节点展开，但是查看数据这个时候是理想数据。意识到是不是同步异步的问题，就各种骚操作都试了一下，还是没有达到想要的结果。

转机

一筹莫展之时，想起前几天做别的需求时候，在github看别人代码时候看到Promise.all操作，就是用来处理多个异步，同时又搜了一下“异步循环”，刚好看到有涉及到这个方法的操作，改成Promise.all(), 问题果然解决了。

【本文地址】

JavaScript

JavaScript

今日新闻

推荐新闻