碎片时间学编程「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'