JS `await` 在 `for…of` 循环中的顺序执行异步操作

观众朋友们，晚上好！很高兴今晚能跟大家聊聊 JavaScript 里一个挺有意思的话题：await 在 for...of 循环中的顺序执行异步操作。别看这几个字挺长，其实理解起来并不难，用好了还能让你的代码更清晰、更可控。

咱们先来热热身，简单回顾一下 async/await 和 for...of 是干嘛的。

async/await：异步操作的优雅舞者

async/await 就像一对舞伴，专门用来跳异步操作的华尔兹。async 关键字声明一个函数是异步的，而 await 关键字则用来暂停 async 函数的执行，直到一个 Promise 对象被 resolve 或 reject。这意味着你可以像写同步代码一样，处理异步操作，避免了回调地狱，代码的可读性大大提升。

举个例子：

async function fetchData() {
  console.log("开始获取数据...");
  const response = await fetch('https://api.example.com/data'); // 暂停执行，等待 fetch 完成
  const data = await response.json(); // 暂停执行，等待 JSON 解析完成
  console.log("数据获取成功:", data);
  return data;
}

fetchData();

在这个例子中，fetch 函数返回一个 Promise 对象。await fetch(...) 会暂停 fetchData 函数的执行，直到 Promise resolve（也就是数据获取成功）。然后，await response.json() 会继续暂停，直到 JSON 解析完成。整个过程看起来就像同步代码一样，非常直观。

for...of：遍历可迭代对象的利器

for...of 循环是 ES6 引入的一种新的循环语法，专门用来遍历可迭代对象，比如数组、Map、Set、字符串等等。它的语法简洁明了：

const myArray = [1, 2, 3, 4, 5];

for (const element of myArray) {
  console.log(element);
}
// 输出：
// 1
// 2
// 3
// 4
// 5

for...of 循环会依次取出 myArray 中的每个元素，并将其赋值给 element 变量，然后执行循环体内的代码。

await 在 for...of 循环中的应用：顺序执行的奥秘

现在，我们把 await 和 for...of 结合起来，看看会发生什么。想象一下，你有一个数组，每个元素都需要经过一个异步操作才能处理。如果不用 await，你可能会陷入并发执行的泥潭，结果可能出乎意料。但是，有了 await，你可以确保每个异步操作都按顺序执行，一个接一个，就像排队一样。

async function processArray(array) {
  for (const item of array) {
    console.log(`开始处理 ${item}`);
    const result = await asyncOperation(item); // 关键：await 确保顺序执行
    console.log(`处理 ${item} 完成，结果：${result}`);
  }
  console.log("所有元素处理完毕");
}

async function asyncOperation(item) {
  // 模拟一个异步操作，比如网络请求或者定时器
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(item * 2);
    }, 500); // 模拟 500 毫秒的延迟
  });
}

const dataArray = [1, 2, 3];
processArray(dataArray);

在这个例子中，processArray 函数接收一个数组，然后使用 for...of 循环遍历数组中的每个元素。关键在于 await asyncOperation(item) 这一行。await 关键字会暂停循环的执行，直到 asyncOperation 函数返回的 Promise resolve。这意味着，只有当 asyncOperation 处理完当前元素后，循环才会继续处理下一个元素。

让我们来分析一下执行顺序：

processArray 开始执行。
for...of 循环开始，取出第一个元素 1。
console.log("开始处理 1") 输出。
await asyncOperation(1) 执行，asyncOperation 开始异步操作。
processArray 函数暂停执行，等待 asyncOperation(1) 完成。
500 毫秒后，asyncOperation(1) 完成，Promise resolve，返回 2。
processArray 函数恢复执行，result 变量被赋值为 2。
console.log("处理 1 完成，结果：2") 输出。
for...of 循环继续，取出下一个元素 2。
重复步骤 3-8，直到所有元素处理完毕。
console.log("所有元素处理完毕") 输出。

可以看到，每个元素的处理都是按顺序进行的，一个元素处理完才会开始处理下一个元素。

for...of vs. forEach：谁更适合 await？

你可能会想，forEach 也可以遍历数组，为什么不用 forEach 呢？这是个好问题。答案是：forEach 并不适合与 await 配合使用。

forEach 循环本身不是一个异步操作，它只是一个同步的循环，会立即执行所有回调函数。即使你在 forEach 的回调函数中使用 await，forEach 循环也不会等待这些异步操作完成。这意味着，forEach 循环会并发地执行所有异步操作，而不是按顺序执行。

async function processArrayWithForEach(array) {
  array.forEach(async item => { // 注意：这里是异步函数
    console.log(`开始处理 ${item}`);
    const result = await asyncOperation(item);
    console.log(`处理 ${item} 完成，结果：${result}`);
  });
  console.log("所有元素处理完毕");
}

processArrayWithForEach(dataArray);

在这个例子中，forEach 循环会立即遍历 dataArray 中的所有元素，并为每个元素启动一个异步操作。但是，forEach 循环不会等待这些异步操作完成，而是会立即执行 console.log("所有元素处理完毕")。因此，你可能会看到 "所有元素处理完毕" 的输出出现在其他元素的处理结果之前，顺序是混乱的。

用表格总结一下 for...of 和 forEach 在处理异步操作时的区别：

特性	`for...of`	`forEach`
执行方式	顺序执行，等待每个异步操作完成	并发执行，不等待异步操作完成
`await` 支持	完美支持，确保顺序执行	不支持，无法保证顺序执行
适用场景	需要按顺序执行异步操作的场景	不需要保证顺序，可以并发执行异步操作的场景

更复杂的例子：处理多个 API 请求

让我们来看一个更实际的例子，假设你需要从一个 API 获取用户列表，然后为每个用户调用另一个 API 获取用户的详细信息。

async function fetchUserDetails(userId) {
  // 模拟获取用户详细信息的 API 请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        id: userId,
        name: `User ${userId}`,
        email: `user${userId}@example.com`
      });
    }, 300);
  });
}

async function fetchUsers() {
  // 模拟获取用户列表的 API 请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([1, 2, 3, 4, 5]); // 模拟用户 ID 列表
    }, 500);
  });
}

async function processUsers() {
  const userIds = await fetchUsers();
  console.log("用户 ID 列表:", userIds);

  for (const userId of userIds) {
    console.log(`开始获取用户 ${userId} 的详细信息`);
    const userDetails = await fetchUserDetails(userId);
    console.log(`用户 ${userId} 的详细信息：`, userDetails);
  }

  console.log("所有用户详细信息获取完毕");
}

processUsers();

在这个例子中，fetchUsers 函数模拟获取用户 ID 列表的 API 请求，fetchUserDetails 函数模拟获取用户详细信息的 API 请求。processUsers 函数首先调用 fetchUsers 获取用户 ID 列表，然后使用 for...of 循环遍历用户 ID 列表，并为每个用户 ID 调用 fetchUserDetails 获取用户的详细信息。await 关键字确保了每个用户的详细信息都是按顺序获取的，一个用户的信息获取完毕才会开始获取下一个用户的信息。

异常处理：不要让你的循环崩溃

在异步操作中，异常处理非常重要。如果一个异步操作失败，可能会导致整个循环崩溃。为了避免这种情况，你可以使用 try...catch 语句来捕获异常。

async function processArrayWithTryCatch(array) {
  for (const item of array) {
    try {
      console.log(`开始处理 ${item}`);
      const result = await asyncOperation(item);
      console.log(`处理 ${item} 完成，结果：${result}`);
    } catch (error) {
      console.error(`处理 ${item} 失败：`, error);
      // 可以选择继续循环，或者直接退出循环
    }
  }
  console.log("所有元素处理完毕");
}

在这个例子中，try...catch 语句包裹了 await asyncOperation(item)，如果 asyncOperation 函数抛出异常，catch 块会被执行，你可以记录错误信息，或者执行其他处理逻辑。

性能优化：避免过度串行

虽然 await 确保了顺序执行，但在某些情况下，过度串行可能会导致性能问题。如果你的异步操作之间没有依赖关系，可以考虑使用 Promise.all 来并发执行这些操作。

async function processArrayConcurrently(array) {
  const promises = array.map(async item => {
    console.log(`开始处理 ${item}`);
    const result = await asyncOperation(item);
    console.log(`处理 ${item} 完成，结果：${result}`);
    return result;
  });

  const results = await Promise.all(promises);
  console.log("所有元素处理完毕，结果：", results);
}

在这个例子中，array.map 方法会为数组中的每个元素创建一个 Promise 对象，然后 Promise.all 方法会并发地执行这些 Promise 对象。只有当所有 Promise 对象都 resolve 后，Promise.all 才会 resolve，并将所有 Promise 对象的结果收集到一个数组中返回。

总结

await 在 for...of 循环中是一个强大的工具，可以让你以同步的方式编写异步代码，确保异步操作按顺序执行。但是，需要注意 for...of 和 forEach 的区别，以及异常处理和性能优化。

希望今天的讲解对大家有所帮助！记住，编程就像跳舞，async/await 就是你的舞伴，for...of 就是你的舞步，只要掌握了技巧，就能跳出精彩的舞蹈！

最后，给大家留个思考题：如果你的异步操作需要依赖前一个异步操作的结果，那么 Promise.all 还能用吗？如果不能，该怎么解决？欢迎大家在评论区留言讨论！

祝大家编程愉快！

发表回复 取消回复

发表回复取消回复