了解 JavaScript 中的 Async/Await：深入研究输出时序

澄清 JavaScript 异步/等待行为的计时

在现代 JavaScript 开发中， 异步/等待 已成为处理异步代码的重要工具。尽管它很有用，但许多开发人员在利用这些技术预测函数中输出的确切时间时遇到了困惑。在 Adaface 等编码评估中尤其如此，了解异步操作的流程至关重要。

您正在解决的问题提供了两个异步函数，它们具有看似相似的行为，但在时间方面有不同的结果。乍一看，这两个函数可能都需要 10 秒，但实际答案让许多开发人员感到惊讶，因为它涉及到对 Promise 如何解决的更深入的理解。

本文旨在引导您完成代码，详细说明如何 异步 和 等待 机制的工作原理，以及 Promise 解析的顺序如何影响最终结果。读完本文后，您应该对异步 JavaScript 中的计时工作原理有更清晰的了解。

让我们深入研究代码来理解为什么第一个函数输出 24 5秒后，第二个函数也输出 24 但具有不同的承诺结构。有了这些知识，您将为即将到来的面试评估做好更好的准备。

探索 JavaScript 中的异步操作

提供的脚本演示了 JavaScript 中异步操作的强大功能 异步 和 等待 关键词。主要思想是高效处理延迟操作等异步任务。在这两个例子中，函数 5s(x)后 通过返回一个用该值解析的 Promise 来模拟 5 秒的延迟 x。这种延迟对于理解操作顺序以及 Promise 如何与函数流程交互至关重要。

在第一个函数中， 多（输入），代码依次等待两个 Promise 得到解决。这 等待 关键字确保代码暂停执行，直到承诺返回 5秒后(3) 已解决。然后，在第一个 Promise 解决后，代码再等待 5 秒以等待第二个 Promise 5秒后(4) 来解决。这导致计算完成前的总等待时间为 10 秒。输入乘以两个解析值得出最终输出。

第二个函数， Second_mult（输入），通过同时启动两个 Promise 来提高性能。通过分配 5秒后(3) 和 5秒后(4) 应用之前的变量 等待，两个承诺并行运行。当代码到达 等待 语句时，它会等待两个 Promise 得到解决，但它们已经在进行中，将总等待时间减少到仅 5 秒。这种并发执行凸显了优化异步操作的重要性。

这些脚本演示了如何使用 async 和 wait 来干净地处理异步代码。了解何时同时或顺序运行异步任务对于优化性能至关重要。这 第二个乘数 函数的方法显示了避免不必要的延迟的好处，而第一个示例在操作必须按特定顺序发生时很有用。这两个例子都广泛适用于现实场景 承诺处理 是必需的，例如从 API 获取数据或执行依赖于外部资源的操作。

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// First approach using async/await with sequential waits
async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

// Calling the function and handling the promise resolution
mult(2).then(value => {
  console.log(value); // Output: 24 after 10 seconds
});

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// Second approach optimizing by starting both promises concurrently
async function second_mult(input) {
  const f = after5s(3); // Starts promise immediately
  const g = after5s(4); // Starts second promise concurrently
  return input * await f * await g;
}

// Calling the function and handling the promise resolution
second_mult(2).then(value => {
  console.log(value); // Output: 24 after 5 seconds
});

掌握 JavaScript 中的异步模式

现代 JavaScript 中最重要的概念之一是如何高效地处理异步任务。虽然 异步/等待 虽然语法简化了异步代码的可读性，但开发人员还必须考虑其他因素。使用异步函数的一个关键方面是了解 JavaScript 如何管理 事件循环 和异步调用堆栈。事件循环允许 JavaScript 并发执行多个任务，即使在单线程环境中也是如此，方法是将非阻塞任务（例如 Promise）推送到队列并继续执行其他代码。

异步操作中经常被忽视的一个元素是错误处理。通过使用 async/await 语法，开发人员可以将他们的代码包装在 尝试...抓住 阻止以优雅地管理承诺拒绝和其他错误。此方法可确保捕获并处理异步操作中发生的任何错误，而不会中断程序流程。异步函数不仅可以提高性能，还可以使复杂的错误处理更加高效且更易于调试。

另一个重点关注领域是如何 Promise.all 可用于同时处理多个 Promise。与第一个示例中顺序等待承诺不同， Promise.all 同时执行所有 Promise，并以数组形式返回结果。当进行多个 API 调用或执行执行顺序不重要的多个任务时，此方法非常有用。了解如何正确构建并发任务对于编写最佳且可扩展的 JavaScript 代码至关重要。