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