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

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

对于循环

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'