理解 JavaScript 中的 async 和 await：简洁异步代码的关键

JavaScript 的异步特性是其最大的优势之一，但它也可能让开发人员感到沮丧。随着时间的推移，我们已经从回调函数（以及可怕的“回调地狱”）转向承诺，现在又转向异步和等待。这些现代工具简化了异步编程，使您的代码更易读、更易于维护和更高效。

但是 async 和 await 究竟是如何工作的？它们为什么如此有用？让我们深入探索吧！

什么是 **async** 和 **await**？

在 JavaScript 中，async 和 await 是 ES2017 (ES8) 的一部分，它们提供了一种以更同步的方式处理异步操作的方法。它们建立在 Promises 之上，可让您编写更清晰、更易读的代码。

async：将函数声明为异步可确保它始终返回一个 Promise，即使你没有明确返回一个 Promise

await：此关键字在异步函数中用于暂停函数的执行，直到 Promise 被解决或拒绝。它使异步代码看起来是同步的。

**它们如何工作？**

让我们看一些例子来了解它们是如何工作的。

**函数示例**

这里，**async** 关键字自动将返回值包装在 Promise 中。因此，调用 **sayHello()** 将返回一个解析为

在 **async** 函数中使用 **await**

**await** 关键字暂停函数的执行，直到承诺被解决或被拒绝。

如果没有 **await**，您就需要链接 **.then()** 调用，这会使代码更难阅读。

**是否会**阻止执行？**

如果 **await** 确实阻止了执行，那么它与传统同步 JavaScript 有何不同，使用它的实际好处是什么？

这里出现了一些混淆：await **不会阻塞主线程**。它只会暂停当前异步函数的执行，而程序的其他部分将继续运行。

类比：

想象一下你正在做饭：

同步：你必须站在炉边，不断搅拌锅，直到食物煮熟。在此期间，你不能做任何其他事情。

异步/等待：将食物放入烤箱（等待 Promise 将其烤熟）。然后，您可以在等待期间做其他事情（切菜、摆桌子）。当计时器响起时（Promise 解析），您回到烤箱并取出食物。

例子：

输出：

请注意，“End”在“Data fetched”之前记录。这表明，虽然 **await** 暂停了 **fetchData** 函数，但它不会阻止程序的其余部分。

**结论**

和是强大的工具，可以改变我们用 JavaScript 编写异步代码的方式。通过使异步工作流看起来同步，它们可以提高可读性、简化错误处理，并让您精确控制顺序和并行操作 - 所有这些都不会阻塞主线程。