获取请求； .then 和 async/await 的区别

javascript 中的异步代码可能会令人困惑、棘手且难以理解。但是，异步代码使我们的程序更加高效、易用，现代网页完全依赖它！作为开发人员，理解和实现异步代码是我们学习的试金石。最常用的异步代码位之一是 fetch() 方法。 fetch 方法是一种用于跨网络异步获取资源的 javascript 方法。对于大多数刚开始的项目，您将从数据库中获取信息并将其显示在页面上。让这个方法在你的程序中实现起来稍微有点棘手是因为有很多方法可以实现它。在为您的目标研究解决方案时，您遇到了多种完成此任务的方法。响应 fetch() 返回的承诺的两种最流行的方法是 .then 和 async/await 语法响应。在本文中，我不仅会详细介绍如何将语法上的 .then 表达式转换为 async/await 表达式，还会详细说明这些方法适用于哪些情况。

首先，我们需要了解这段代码的最终目标。从 10,000 英尺的角度看；它们响应从 fetch 方法返回的已解决的承诺对象。根据承诺的解决方式，我们将获取该对象并根据我们的目标在其上运行一系列进一步的方法。本文将坚持最常见的 fetch 用例之一。即从 API 获取数据并将这些数据显示在我们的网页上。

学习如何完成响应 fetch 的已解决承诺的任务的最常见方法是使用 .then 方法。让我们来看看 ;

在这段代码中，我们可以看到我们正在获取已解析的 Promise 对象，然后对接收到的数据运行一些方法，以将其转换为更可用的格式以供我们操作。 .then 可以解释为“当这个 Promise 被解决时，然后执行这段代码。”通常在一两个 .then' 之后，我们会看到

这种执行 fetch 方法的方法工作得很好，但是，有一种更现代、更整洁的方法来做到这一点。让我们看一下，然后我们将对其进行分解。

首先，我们可以看到整个函数被包裹在 async 中，即指定以下代码是异步的，并且是 javascript 正确编译所必需的。

在这部分代码中，我们可以看到我们正在使用关键字 await 分配一个变量。在异步承诺解决之后，等待之后的这部分将被分配给变量！我们以我们在 javascript 中使用的单线程方式将这些项目链接在一起！

除了简单地使用更现代的语法来这样做之外，还有很多原因。

一——async/await 语法读起来更像同步代码，更容易理解

二——async/await 非常适合需要按顺序执行的代码，这在 fetch 请求中很常见。在解决前一个步骤之前，我们无法继续前进。

三 - .then 在显示需要并行操作的加载符号或代码时或在解决承诺的其余部分时可能更有效。

现在你可能会问——如果 Promise 解析错误，我们如何捕捉？这是一个很好的问题。看一看;

这称为try-catch。如果在 try 块执行期间的任何时候出现错误，javascript 将跳转到 catch 代码块。 catch 块接受一个参数；错误并允许您对所述错误执行所需的响应。

总结这一切；在我的旅途中，我经常遇到这种语法，感到害怕和困惑，但经过一点点的回顾和反思，我发现 async/await 语法更干净，更容易阅读，但也有一个警告，它不能运行并行块，因此在某些情况下，使用我们可信赖的 .then 语法可能会更好。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38168/59222011