默认情况下,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 的很好的例子,但还有许多其他方法可以利用它,我期待将来使用它们。