高效率的JS循环和异步处理：掌握async/await技巧

2024-01-28 01:22:44

在现代的JavaScript编程中，异步编程已经成为一种常态。这主要是因为我们经常需要与服务器通信，或者处理一些耗时的任务，例如文件读取或图像加载。在这些情况下，我们不想让我们的程序等待这些任务完成，而是希望能够继续执行其他任务。

async/await是一种处理异步操作的语法糖，它可以使我们的代码看起来更像同步代码，从而简化了异步编程。然而，当您尝试在循环中使用async/await时，事情可能会变得复杂一些。

例如，如果您有一个包含10个元素的数组，并且您想使用async/await来异步地获取每个元素的详细信息，那么您可能会使用以下代码：

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

async function getDetails(element) {
  // 异步地获取元素的详细信息
  const response = await fetch(`https://example.com/api/details/${element}`);
  const data = await response.json();
  return data;
}

async function main() {
  for (const element of array) {
    const details = await getDetails(element);
    console.log(details);
  }
}

main();

这段代码的问题在于，它将在等待所有元素的详细信息返回之前继续执行循环的下一轮。这可能会导致问题，因为您可能需要在获取所有元素的详细信息之前使用这些详细信息。

为了解决这个问题，您可以使用以下两种方法之一：

使用 Promise.all() 函数来等待所有元素的详细信息返回。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

async function getDetails(element) {
  // 异步地获取元素的详细信息
  const response = await fetch(`https://example.com/api/details/${element}`);
  const data = await response.json();
  return data;
}

async function main() {
  const detailsPromises = array.map(getDetails);
  const details = await Promise.all(detailsPromises);

  for (const detail of details) {
    console.log(detail);
  }
}

main();

使用 for await...of 循环来遍历数组。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

async function getDetails(element) {
  // 异步地获取元素的详细信息
  const response = await fetch(`https://example.com/api/details/${element}`);
  const data = await response.json();
  return data;
}

async function main() {
  for await (const element of array) {
    const details = await getDetails(element);
    console.log(details);
  }
}

main();