使用 Fetch 和 then实现异步编程

在创建网页时，我们几乎总是希望访问互联网上其他地方的信息。这不仅能创建一个更有趣、更吸引人的应用程序，还能让我们不必将网站所需的所有信息都放在一个服务器上。为了使用 JavaScript 远程访问数据，我们使用了 fetch() 函数。

Fetch

fetch() 函数是由 Window 和 WorkerGlobalScope 实现的全局方法。正因为如此，几乎在需要它的所有情况下都可以使用 fetch()。不过，在线访问信息需要时间。一般来说，我们通常不希望我们的代码在进入其他步骤之前等待一个获取请求完成。幸运的是，fetch() 是一个异步函数，这意味着在下一行代码运行时，它会返回一个 Promise 实例。

Promises

Promise 实例和它听起来一样，它是一个承诺，即一旦收到 fetch() 请求中的信息，就会立即将数据传递给代码。

然而，这给我们留下了另一个问题。如果其他代码在 Promise 等待解析时运行，那么 fetch() 收到的信息将没有代码来处理。为了解决这个问题，我们可以使用一些工具：await 和 then()。

Await and Then

Await 是一个操作符，在尝试将 Promise 实例赋值给变量时非常有用，而 then() 则用于在 Promise 解析后立即调用回调函数。在这篇文章中，我们将探讨 fetch() 和 then() 如何相互影响，await 下次再说。

如何使用Fetch

根据我们前面的阅读，fetch() 函数可以接受几个参数，但只需要一个。为简单起见，我们将只查看所需的参数，但请记住，还可以添加其他选项来操作该功能。

传递给 fetch() 函数的第一个也是最主要的参数是资源，即试图访问的信息的 URL。

rust 复制代码

fetch('http://localhost:3000/data')

如前所述，fetch()将尝试访问数据，并在执行此操作时返回一个Promise 实例，稍后该实例将被替换为真实信息。我们将这个已解决的请求称为Response对象。

使用Then

一旦我们有了Promise 实例，就可以将其传递给then()要使用的函数。是Promise then()实例使用的一种方法，它有一个强制参数和一个可选参数：用于成功解析的回调函数和/或用于拒绝 Promise 解析的回调函数。我们将首先仅查看仅使用一个参数的实例。**** ****then()

与获取请求结合起来，它看起来像这样：

scss 复制代码

fetch('http://localhost:3000/data')
.then(res => res.json())

在上面的示例中，我们从请求中获取响应fetch()并将其传递给箭头函数。此回调函数更改作为响应的JSON字符串，并返回一个可用的对象以供以后使用。 请记住，只有在传递给函数的Promise 解析后，才会翻译此响应then()。

then()从这里，我们可以根据需要在许多功能上联系在一起。这是因为每个then()函数都会立即返回一个Promise实例。

css 复制代码

fetch(`http://localhost:3000/data`)
.then(res => res.json())
.then(response => someFunction(response))
.then(someValue => console.log(someValue))

当每个Promise完成时，回调函数将按照它们链接的顺序被调用。

如前所述，我们可以添加另一个回调函数作为函数的参数，以便在原始Promise 无法解析then()时使用。在这种情况下，我们会有这样的东西：****

javascript 复制代码

fetch(`http://localhost:3000/data`)
.then(res => res.json(), () => console.log("fetch unsuccessful"))

Resolving Promises

函数then()将根据传递给它的Promise 如何解析来选择任一回调函数。这些是Promise 的处理方式：

如果返回一个值，则将返回值作为Promise 的值来履行Promise 。 •如果没有返回值，则Promise 以undefined作为值来履行。 •如果抛出错误，Promise 就会被拒绝，错误就是它的值。 •如果返回了已履行的Promise ，则Promise 会以返回值作为其自身值来履行。 •如果返回了被拒绝的Promise ，则该 Promise 被拒绝并共享返回的值。 •如果返回另一个待处理的Promise，则该Promise仍处于待处理状态，并在前一个 Promise解决后立即履行。****

除了本文中讨论的内容之外，还有各种不同的方法可以改变fetch()和方法的行为。then()例如，我们可以添加更多参数，fetch()例如方法、标头、正文等。但是，为了简单化使用，本文涵盖了您需要了解的大部分内容。感谢您的阅读！