参考：https://blog.csdn.net/qq_45265059/article/details/119892746

JS循环遍历中使用异步

对于同步顺序执行异步操作，并且每次异步操作都需要随着循环顺序执行

1、对于`forEach`来说（慎用）

forEach 方法是同步的，也就是 forEach 的回调函数都是同步调用的，在 forEach 的回调里进行异步操作，每次遍历进行的这些异步操作会并行执行。它的每个迭代都会在前一个迭代完成之后立即执行。因此，在 forEach 中使用异步操作是不可能的，因为它将导致执行流阻塞，而且无法保证异步操作的完成顺序。

//定义一个异步函数
const foo1 = (i:any)=>{return new Promise((resolve, reject) => {setTimeout(() =>{console.log(i);resolve(i)},1000)})
}
const arr = [1,2,3,4,5]
const b = () =>{arr.forEach(async e => {console.log(e);await foo1(e)});
}
b(); // 1 2 3 4 5 1 2 3 4 5

2、对于`for`循环来说（不推荐）

for方法是异步的，也就是每次循环都能顺序执行异步操作
缺点：fo每次循环的作用域是用一个，可能会导致异步操作未结束就进入到下一个迭代中

//定义一个异步函数
const foo1 = (i:any)=>{return new Promise((resolve, reject) => {setTimeout(() =>{console.log(i);resolve(i)},1000)})
}
const arr = [1,2,3,4,5]
async function a() {for (var i = 0; i < arr.length; i++) {console.log(arr[i]);await foo1(arr[i])}
}
a() // 输出：1 1 2 2 3 3 4 4 5 5

3、对于for of 循环（推荐）

其是ES6引入的一种新的循环接口，用于遍历可迭代对象，例如数组、Map和Set等。在使用异步操作时，for…of循环是最推荐的一种方式，因为它每次迭代都会创建一个新的作用域，可以保证异步操作的独立性和安全性。

它可以等异步执行结束后才进入下一个迭代

javascriptCopy codeasync function processData(data) {for (const item of data) {await doAsyncOperation(item);}
}async function doAsyncOperation(item) {return new Promise((resolve, reject) => {// 异步操作代码});
}

在这个例子中，processData 函数使用 for...of 循环来遍历数据，并在每个迭代中等待异步操作完成。doAsyncOperation 函数返回一个 Promise，以便 processData 函数可以等待它完成。这样，异步操作的执行顺序就得到了保证。

4、同时可以用Promise.all来

javascriptCopy codeasync function processData(data) {const promises = data.map(doAsyncOperation);await Promise.all(promises);
}async function doAsyncOperation(item) {return new Promise((resolve, reject) => {// 异步操作代码});
}

在这个例子中，processData 函数使用 map 方法来创建一个包含所有异步操作 Promise 的数组，并在数组上调用 Promise.all 方法。Promise.all 方法将等待所有异步操作完成，然后将它们的结果作为数组返回。这样，所有异步操作都将以并行方式执行。

总结：所以对于循环中调用异步操作的需求，慎用forEach（同步），不推荐for循环（每次迭代身处同一作用域），推荐使用for of以及promise.all二种方式

JS循环遍历中使用异步相关推荐

ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
js错误集锦函数在一个map循环遍历中进行返回值返回结果在调用该函数时收不到返回值
错误代码: superviseFilter = () => {let company = this.props.cooperativeState.allCompanyif(this.state. ...
js循环遍历数组（对象）
js循环遍历数组(对象) 1,for循环对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构. let arr = ['a','b','c']; for (let i=0; i<arr. ...
js循环遍历数组的方式
前言最近在写前端代码,里面经常涉及到数组的循环取值.这里简单总结下前端中数组遍历的四种方式: 数组下标循环 for in 循环 for of 循环 foreach循环例子假设有如下数组:memb ...
html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
python list 删除元素_Python的list循环遍历中，删除数据的正确方法
初学Python,遇到过这样的问题,在遍历list的时候,删除符合条件的数据,可是总是报异常,代码如下: num_list = [1, 2, 3, 4, 5]print(num_list)for i ...
JS 循环遍历总结
一.循环遍历语句 for...in... (ES5) 语法:javascript for(keys in obj){} 适用:遍历对象说明: 1.keys表示obj对象的每一个键值对的键(键名),所 ...
Vue前端js循环遍历数组八种方法总结最新
前五种常用,第三种个人觉得常用最多,自己复制代码打印试试 var arr = [1, 2, 3, 4, 5, 6];// 第一种 for循环遍历var newArr = [];for(var i = ...
html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css
功能:对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色:同时改变对应的另一个ul中li的颜色页面初始化的界面: HTML: 其他推荐: 10:21 10:22 10:25 10 ...

JS循环遍历中使用异步

JS循环遍历中使用异步

1、对于`forEach`来说（慎用）

2、对于`for`循环来说（不推荐）

3、对于for of 循环（推荐）

4、同时可以用Promise.all来

JS循环遍历中使用异步相关推荐

最新文章

热门文章

JS循环遍历中使用异步

JS循环遍历中使用异步

1、对于forEach来说（慎用）

2、对于for循环来说（不推荐）

3、对于for of 循环（推荐）

4、同时可以用Promise.all来

JS循环遍历中使用异步相关推荐

最新文章

热门文章

1、对于`forEach`来说（慎用）

2、对于`for`循环来说（不推荐）