龙空技术网

碎片时间学编程「07」:JavaScript 中的异步数组循环

路条编程 185

前言:

而今姐妹们对“js循环数组的方法”大体比较注重,兄弟们都想要剖析一些“js循环数组的方法”的相关文章。那么小编也在网络上网罗了一些对于“js循环数组的方法””的相关内容,希望姐妹们能喜欢,咱们一起来学习一下吧!

异步操作似乎让很多开发人员感到困惑。当与循环数组结合使用时尤其如此,因为每个可用选项都有一些警告。

对于循环

async 在对数组元素执行异步操作时,结合for(或for...of)循环可能是最直接的选择。await 在循环内使用for 将导致代码停止并等待异步操作完成后再继续。这意味着所有的 Promise 都将按顺序运行。

const asyncUppercase = item =>

new Promise(resolve =>

setTimeout(

() => resolve(item.toUpperCase()),

Math.floor(Math.random() * 1000)

)

);

const uppercaseItems = async () => {

const items = ['a', 'b', 'c'];

for (item of items) {

const uppercaseItem = await asyncUppercase(item);

console.log(uppercaseItem);

}



console.log('Items processed');

};



uppercaseItems();

// LOGS: 'A', 'B', 'C', 'Items processed'

Promise

Promise.all() 为数组上的异步循环提供了另一种选择。与前一个Promise.all()的主要区别在于并行执行所有异步操作。这意味着Promise将无序执行,这在某些情况下可能是一个问题。大多数情况下,这是我首选的解决方案,因为希望 Promise 按顺序执行是非常罕见的。

const asyncUppercase = item =>

new Promise(resolve =>

setTimeout(

() => resolve(item.toUpperCase()),

Math.floor(Math.random() * 1000)

)

);

const uppercaseItems = () => {

const items = ['a', 'b', 'c'];

return Promise.all(

items.map(async item => {

const uppercaseItem = await asyncUppercase(item);

console.log(uppercaseItem);

})

).then(() => {

console.log('Items processed');

});

};

// LOGS: 'A', 'C', 'B', 'Items processed'

数组方法

不幸的是,数组方法(例如)Array.prototype.forEach()不适用于async/ await。唯一可行的解​​决方案是使用前面示例中所示的方法Promise.all()。使用async回调Array.prototype.forEach()将导致其余代码执行并且不等待异步操作。

const asyncUppercase = item =>

new Promise(resolve =>

setTimeout(

() => resolve(item.toUpperCase()),

Math.floor(Math.random() * 1000)

)

);

const uppercaseItems = async () => {

const items = ['a', 'b', 'c'];

await items.forEach(async item => {

const uppercaseItem = await asyncUppercase(item);

console.log(uppercaseItem);

});

console.log('Items processed');

};

uppercaseItems();

// LOGS: ''Items processed', 'B', 'A', 'C'

标签: #js循环数组的方法