前端面试中异步任务顺序化的艺术：async/await 深度剖析

2023-10-24 03:11:50

前端面试中，异步实现是经久不衰的话题。其中，如何顺序化异步任务尤为关键。本文将深入探讨 async/await 在循环中应用的利弊，并提供专家建议，帮助你应对面试中的相关挑战。

异步任务顺序化的陷阱

在常用的循环中使用 async/await 时，一个常见的陷阱是使用 forEach() 函数。虽然 forEach() 循环简单易用，但它并不能保证输出按照数组元素的顺序进行。这是因为 forEach() 是一个异步函数，它在循环中并行执行，使得输出的顺序变得不可预测。

理想的顺序化选择

为了按顺序执行异步任务，我们推荐使用 for...of 或 for...in 循环。这些循环本质上是同步的，它们将在完成一个元素的操作后再继续执行下一个元素。

for...of 循环

async function sequentialForOf() {
  const arr = [1, 2, 3, 4, 5];
  for (const element of arr) {
    const result = await doSomethingAsync(element);
    console.log(result); // 输出按顺序排列
  }
}

for...in 循环

async function sequentialForIn() {
  const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 };
  for (const key in obj) {
    const result = await doSomethingAsync(obj[key]);
    console.log(result); // 输出按键值顺序排列
  }
}

async/await 的巧妙应用

了解循环选择后，我们就可以巧妙地运用 async/await 来优化代码。例如，以下示例将同时执行多个异步任务，并在所有任务完成后输出结果。

async function parallelAsync() {
  const tasks = [
    doSomethingAsync(1),
    doSomethingAsync(2),
    doSomethingAsync(3),
  ];
  const results = await Promise.all(tasks);
  console.log(results); // 输出三个任务的结果
}