了解 JavaScript 中的 async 和 wait：简洁异步代码的关键

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

但是 async 和 wait 到底如何工作，为什么它们如此有用？让我们深入探索吧！

什么是异步和等待？
在 JavaScript 中，async 和 wait 是 ES2017 (ES8) 的一部分，提供了一种以更同步的方式处理异步操作的方法。它们构建在 Promise 之上，允许您编写更清晰、更易读的代码。

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

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

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

异步 函数示例

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

的承诺

在 async 函数中使用 await
await 关键字暂停函数的执行，直到承诺得到解决或拒绝。

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

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

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

类比：
想象一下你正在做饭：

• 同步：你必须站在炉子旁边不断地搅拌锅，直到食物煮熟。在那段时间你不能做任何其他事情。

• 异步/等待：你将食物放入烤箱（等待它会被煮熟的 Promise）。然后，您可以在等待时做其他事情（切蔬菜、摆桌子）。当计时器响起时（承诺解决），您回到烤箱并取出食物。

示例：

输出：

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

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

以上是了解 JavaScript 中的 async 和 wait：简洁异步代码的关键的详细内容。更多信息请关注PHP中文网其他相关文章！