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

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

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

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

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

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

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

异步 函数示例

立即学习“Java免费学习笔记(深入)”;

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

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

的承诺

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

了解 JavaScript 中的 async 和 wait:简洁异步代码的关键
如果没有 await,您需要链接 .then() 调用,这会使代码更难阅读。

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

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

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

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

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

示例:

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

了解 JavaScript 中的 async 和 wait:简洁异步代码的关键
请注意,“End”记录在“Data fetched”之前。这表明,虽然 await 暂停 fetchData 函数,但它不会阻塞程序的其余部分。

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

以上就是了解 JavaScript 中的 async 和 wait:简洁异步代码的关键的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    为浏览器构建了一个 cli

    2025-3-7 7:36:12

    编程技术

    Rino,使用 HTML、CSS 和 Typescript/Javascript 的简单静态网站构建器

    2025-3-7 7:36:17

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索