循环通过异步 JavaScript - Part 4 - JavaScript

在 JavaScript 中，循环是我们经常用到的一个构造。当我们需要处理数组或对象中的数据时，循环是最常见的方式之一。而当我们需要在循环内进行异步操作时，就需要使用异步循环。

异步循环的问题

在循环过程中，每个迭代可能会涉及到异步操作。如果我们使用传统的同步循环，循环会在当前迭代完成之前一直等待。这可能会让我们的程序在异步操作完成前挂起并导致性能问题。

Promise.all()

在处理异步循环时，我们可以使用 Promise.all() 方法。Promise.all() 方法接受一个 Promise 数组，并在所有 Promise 都解决时返回一个 Promise。在 Promise.all() 内部，所有 Promise 将在同时运行。

以下是一个示例，展示了如何使用 Promise.all() 处理异步循环：

const promises = [];

for(let i=0; i<10; i++) {
  promises.push(fetch(`https://jsonplaceholder.typicode.com/todos/${i}`))
}

Promise.all(promises)
  .then(responses => {
    return Promise.all(responses.map(res => res.json()));
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));

在上面的代码中，我们通过循环创建了多个 Promise。这里我们使用了 fetch() 函数，它返回一个 Promise，（‘https://jsonplaceholder.typicode.com/todos/${i}’）代表了要获取的 URL。我们将这些 Promise 存储在数组 promises 中。

接下来，我们使用 Promise.all() 方法处理数组 promises，使它们在同时运行。Promise.all() 方法返回一个 Promise，当提供的所有 Promise 都解决时具有相同的解析值。

在这里，返回的是一个数组，其中包含了与对应 URL 所获得的数据有关的内容。在下一个 then() 方法中，我们使用了 Array.map() 方法，将 responses 数组中的响应解析为 json() 数据。最后，我们使用 console.log() 来输出数据。

Async/Await

另一种处理异步循环的方式是使用 Async/Await 语法。这种语法可让我们以同步方式使用异步代码。在异步函数中，我们可以使用 await 关键字等待一个 Promise 解决，异步函数将在等待的过程中挂起并等待 Promise 解决。

下面是一个使用 Async/Await 来处理异步循环的示例：

async function fetchData() {
  const data = [];

  for(let i=0; i<10; i++) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
    const jsonData = await response.json();
    data.push(jsonData);
  }

  console.log(data);
}

fetchData();

在上面的代码中，我们定义了一个异步函数 fetchData()，其中定义了一个空数组 data。在 for 循环中，我们等待使用 fetch() 函数返回的 Promise 解决，并使用 await 关键字。在解决 Promise 后，我们将响应解析为 json 格式，将它添加到 data 数组中。

最后，我们使用 console.log() 输出从循环中收集的数据。

结论

我们可以使用 Promise.all() 或 Async/Await 来处理异步循环。说到底，这种情况取决于个人喜好和习惯。需要记住的是，在进行任何异步循环时，我们必须找到一种合适的方法来等待异步操作完成并处理它们的结果。