等待承诺..JavaScript 中的 Async 和 Await

2022/11/1 6:24:59

本文主要是介绍等待承诺..JavaScript 中的 Async 和 Await,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

为什么使用 Async 和 Await?

默认情况下,Javascript 同步运行。这意味着每个操作都将等待运行,直到上一个操作完成。例如,运行以下两行代码:

控制台日志记录“你好”和“世界”
将始终在控制台中产生此输出:
世界您好
1号线先行,2号线紧随其后。

但是,有时我们需要代码异步运行。输入:异步并等待!

异步和等待

异步和等待与承诺一起使用。将 async 关键字放在函数之前可确保该函数返回 promise。await 关键字只能在异步函数中使用。await 关键字之后的任何内容都告诉 Javascript 等待,直到 promise 解析并返回其结果。那么我们什么时候可以使用异步和等待呢?

付诸实践

在完成训练营的顶点项目时,我正在帮助一位朋友集思广益,为她的应用程序运行一些可能的方法。她希望用户点击他们有兴趣领养的狗,然后填写领养表格。我们决定让初始点击事件创建一个 post 请求,本质上是加入她的用户和可收养的 pup,然后将用户推送到另一个页面,他们可以在其中输入更多信息。但是,她的 post 函数会在承诺解决之前将用户推送到表单页面,这意味着我们还没有新创建的捐赠表单的 ID,因此无法在我们的 url 中使用该 ID,然后在用户完成表单后再次在我们未来的补丁请求中使用该 ID。为了解决这个问题,我们被引入了异步和等待!

首先,我们在函数中添加了 async 关键字。我们将 fetch 设置为常量 (res),并在 fetch 前面添加了 await 关键字。然后我们声明一个新的常量(data)并将其设置为我们的res.json(),包括await关键字。await 关键字告诉 JavaScript 在解决上一个操作之前不要继续下一个操作。

然后,我们创建了一个恰当地命名为重定向的函数,它将用户推送到他们可以更新其余表单信息的页面。最后,我们使用从承诺中收到的数据调用重定向函数,将其解析为 json。

我们的最终代码:

异步和等待代码

结论

总之,async 和 await 是一个很好的工具,当需要 JavaScript 代码能够异步运行时可以使用。虽然今天我们只看到了一个使用 async 和 await 的很好的例子,但还有许多其他方法可以利用它,我期待将来使用它们。



这篇关于等待承诺..JavaScript 中的 Async 和 Await的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程