使用 Async/Await:正确的方法

2025-05-25

使用 Async/Await:正确的方法

当异步/等待操作首次引入时,开发人员兴奋不已,认为事情会变得更清晰、更短、更快。但问题是我们仍然在编写同步代码。例如,程序逐行按顺序工作,但异步的工作方式并非如此。在MDN 文档中,异步定义为异步函数通过事件循环以与其余代码不同的顺序运行,并返回隐式 Promise 作为其结果。因此,如果您有一个长时间运行的任务,例如数据库查询或庞大的 API 调用,这是正确的处理方式。然而,使用await关键字来解析每个长时间运行的任务可能会有害。我将演示如何有效地使用异步。我使用 Axios 进行请求,并使用 Performance-now 来计算执行时间。

替代文本

假设我们有两个 API,一个用于 Pokemon,另一个用于 Digimon。从第 7 行到第 11 行,我们只想执行与 Pokemon 相关的操作。现在,您可能会问:那为什么要进行 Digimon 调用呢?当然是为了展示 await 的影响。因此,将两个 API 调用并排放置是可以的,除非您使用await。您应该始终问的问题是:“我真的需要下一行来自 API 的数据吗?”如果答案是否定的,那么请避免使用await。即使您不打算使用 Digimon 数据,await也会尝试解析它,而解析异步操作会对您的程序造成损害。正如您在终端输出中看到的,该程序花费了 2539 毫秒。现在,检查一下。

替代文本

这一步耗时 282 毫秒。所以线程仍然没有被阻塞,但执行时间缩短了 10 倍。现在,让我们迭代这些 API 50 次。

替代文本

约40秒。现在没有数码宝贝等待。

替代文本

如果没有 await,则需要 10 秒。所以,这 30 秒的差异是显而易见的。如果我们增加迭代次数,差异会更大。

最后的想法

正如你所见,单一的await会严重影响程序的性能。编写异步程序时,不要考虑同步。务必问自己:“我现在真的需要这些数据吗?”

谢谢阅读。

文章来源:https://dev.to/ogzhanolguncu/using-async-await-the-right-way-5hbk
PREV
JavaScript 中的内存管理
NEXT
如何再也不用碰鼠标🐭 VIM?嗯……不用了。如果我不想花 32752 个小时学习/配置 VIM 怎么办?