循环通过异步 JavaScript - Part 2

在 上一篇文章 中，我们探讨了如何使用 Promise 对象通过异步循环执行 JavaScript 代码。在本文中，我们将继续探讨有关异步循环的内容，并介绍使用 async/await 关键字来实现循环。

使用 async/await 循环

在 JavaScript 中，async/await 是一种异步编程工具，它可以让我们更加方便地处理异步代码。通过将 async 关键字添加到函数之前，我们可以告诉 JavaScript 这个函数是异步的。然后，我们可以使用 await 关键字来等待异步操作完成，并以阻塞形式获取结果。

以下是使用 async/await 循环的示例代码：

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

asyncForEach([1, 2, 3], async number => {
  const result = await fetch(`https://jsonplaceholder.typicode.com/todos/${number}`);
  const json = await result.json();

  console.log(json.title);
});

上述代码示例中，我们定义了一个名为 asyncForEach 的函数，该函数采用一个数组和回调函数作为参数。它通过 for 循环遍历数组，并使用 await 关键字等待回调函数的执行。这可能会使回调函数的执行时间变长，但确保了它们被正确地执行。

当我们调用 asyncForEach 函数时，我们定义了一个回调函数，该回调函数用于获取异步请求的数据。在这个例子中，我们使用了 fetch 函数，该函数用于获取从 jsonplaceholder.typicode.com 的第 $1$ 至 $3$ 条 todos。当我们获得响应时，我们将其解析为 JSON 格式，并输出 title 属性。

包装 timeout 函数

很多时候，我们需要在执行异步函数之前等待一段时间。在传统的 JavaScript 中，我们可以使用 setTimeout 函数来实现这一点。但是，要包装这个函数以使其符合 Promise 的标准是相当麻烦的。在使用 async/await 时，有一个叫做 sleep 的库，它提供了一个便捷的方法来暂停代码的执行。

以下是使用 sleep 来实现等待的代码示例：

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await sleep(1000); // 停顿 1 秒钟
    await callback(array[index], index, array);
  }
}

asyncForEach([1, 2, 3], async number => {
  const result = await fetch(`https://jsonplaceholder.typicode.com/todos/${number}`);
  const json = await result.json();

  console.log(json.title);
});

在上述代码示例中，我们只需添加一行 await sleep(1000); 即可实现等待一秒钟。这使得我们可以更轻松地对异步循环进行控制，而不必担心 setTimeout 函数所带来的复杂性。

总结

在本文中，我们探讨了如何使用 async/await 进行异步循环。我们编写了一个名为 asyncForEach 的函数，该函数遍历一个数组，并基于每个元素执行一个回调函数。我们还讨论了如何使用 sleep 函数来实现等待功能，以方便控制异步代码的执行。

如果你对本文的内容还有疑问，可以留言给我们。也欢迎访问我们的博客，获取更多关于 JavaScript 开发的精彩内容。