首页 > web前端 > js教程 > 了解 JavaScript 中的 async 和 wait:简洁异步代码的关键

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

Mary-Kate Olsen
发布: 2024-12-18 06:49:10
原创
354 人浏览过

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

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

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

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

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

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

异步 函数示例

Understanding async and await in JavaScript: The Key to Cleaner Asynchronous Code

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

的承诺

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

Understanding async and await in JavaScript: The Key to Cleaner Asynchronous Code
如果没有 await,您需要链接 .then() 调用,这会使代码更难阅读。

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

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

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

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

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

示例:

Understanding async and await in JavaScript: The Key to Cleaner Asynchronous Code
输出:

Understanding async and await in JavaScript: The Key to Cleaner Asynchronous Code
请注意,“End”记录在“Data fetched”之前。这表明,虽然 await 暂停 fetchData 函数,但它不会阻塞程序的其余部分。

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

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

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板