等待承诺..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 的很好的例子，但还有许多其他方法可以利用它，我期待将来使用它们。