ES7 async/await 如何异步循环遍历

在前端开发中，异步编程是必不可少的技能。ES7 中的 async/await 是一种更加优雅和易于理解的异步编程方式。在本文中，我们将探讨如何使用 async/await 实现异步循环遍历的技巧以及一些示例代码。

异步循环遍历的问题

在编写异步代码时，我们经常需要对一组数据进行循环遍历，例如发送多个请求或处理多个文件。但是，由于异步代码的特性，传统的 for 循环或 forEach 方法不能满足我们的需求，因为它们无法等待异步操作完成后再执行下一步操作。这就需要我们使用异步循环遍历的技巧。

使用 async/await 实现异步循环遍历

async/await 是一种基于 Promise 的异步编程方式，它可以将异步代码写成同步的方式，使得代码更加易于理解和维护。下面是一个使用 async/await 实现异步循环遍历的示例代码：

async function asyncForEach(array, callback) {
  for (let i = 0; i < array.length; i++) {
    await callback(array[i], i, array);
  }
}

这个函数接受一个数组和一个回调函数作为参数。在循环遍历数组时，它使用 await 暂停代码执行，等待回调函数返回 Promise 对象并解决它，然后再继续执行下一步操作。这样就可以实现异步循环遍历了。

例如，我们可以使用这个函数发送多个请求，并在所有请求完成后打印结果：

async function sendRequests(urls) {
  const responses = [];
  await asyncForEach(urls, async (url) => {
    const response = await fetch(url);
    responses.push(response);
  });
  console.log(responses);
}

这个函数接受一个 URL 数组作为参数，使用 asyncForEach 函数循环遍历数组，发送请求并将结果存储在 responses 数组中。最后，它打印所有响应结果。

总结

异步循环遍历是一种常见的编程需求，使用 async/await 可以使代码更加易于理解和维护。本文介绍了如何使用 async/await 实现异步循环遍历，并提供了一些示例代码。希望这些技巧能帮助你更好地理解和应用异步编程。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f700bd10417a222fec30a