如何在 JavaScript 中使用 Fetch API

在 Web 开发中，您经常需要与其他 Web 服务器连接/通信以获取信息/数据。例如，在某些网站上注册新帐户时，您通常会看到使用 Gmail 或其他第三方帐户进行注册的选项。这使您只需单击一下即可注册一个新帐户，而无需手动填写整个表格。当您选择“使用第三方帐户注册”选项时，应用程序会与第三方应用程序的服务器通信并发送请求以访问您存储在那里的信息。这个请求是通过 API 发送的，API 是一组规则，用于管理不同的应用程序或系统如何相互通信。在本文中，我们将学习使用 JavaScript 发送此类请求。

什么是Fetch API

Fetch API 在 JavaScript 中提供了一个简单的fetch()方法，用于跨网络获取、访问和操作资源。fetch()方法允许您使用以前使用 XMLHttpRequest 进行的JavaScript 进行异步 JavaScript 和 XML (AJAX) 调用。异步请求与主程序并行运行，并且不会停止执行它们下面的代码。即使 API 没有发回任何响应，Fetch API 请求下方的代码也会继续运行。当 API 响应 AJAX 调用时，将恢复fetch()方法。

Fetch API 使用 Promise 并提供强大的功能，使处理 Web 请求及其响应变得更加容易；这是避免使用 XMLHttpRequest 时创建的回调地狱的好方法。

注意：浏览器控制台用于本文示例的演示。

JavaScript 中 Fetch API 的语法

我们需要调用fetch()方法才能在我们的 JavaScript 代码中使用 Fetch API。fetch()方法将API 的 URL 作为参数。

fetch(URL)

我们需要在fetch()方法之后定义then( )方法：

.then(function() {

})

fetch()方法的返回值是一个承诺。如果该承诺得到解决，则执行then()方法主体中的代码。then()方法的主体应该包含可以处理 API 发送的数据的代码。

然后我们需要定义catch()方法；catch()方法仅在 promise 被拒绝的情况下执行：

.catch(function() {
});

总而言之fetch()方法应该是这样的：

fetch(url)
.then(function() {

})
.catch(function() {

});

现在我们已经了解了 Fetch API 的语法，现在我们可以继续讨论在真实 API 上使用 fetch ()方法的真实示例。

如何使用 Fetch 方法从 API 获取数据

在本例中，我们将使用 GitHub 用户的 API 来获取用户信息数据，并仅使用原生 JavaScript 将其显示在控制台上；所以让我们开始吧：

首先，我们将创建一个名为url的变量；此变量将保存 API 的 URL，该 URL 将返回名为fabpot的用户的存储库：

const url = 'https://api.github.com/users/fabpot/repos';

现在我们将使用fetch()方法来调用 GitHub 用户 API；

fetch(URL)

fetch()方法将URL 作为参数：

fetch(url)
.then(function(data) {

})
})
.catch(function(error) {

});

在上面给出的代码中，我们调用了 Fetch API从 GitHub获取名为fabpot的用户的存储库。我们已将 URL 作为 Fetch API 的参数传递给 GitHub 用户 API。然后 API 会发回一个响应，该响应是一个包含一系列方法的对象；这些方法可用于对接收到的信息执行不同的功能。如果我们想将对象转换为 JSON，那么我们可以使用 json() 方法。

要将对象转换为 JSON，我们需要添加then()方法。then()方法将包含一个函数；该函数将接受一个名为 response 的参数：

fetch(url)
.then((response) => )

响应参数用于存储从 API 返回的对象。使用 json() 方法将此对象转换为 JSON 数据：

fetch(url)
.then((response) => response.json())

现在我们可以通过添加另一个then()语句以 JSON 的形式输出数据；此语句包含一个函数，该函数将名为 data 的变量作为参数：

.then(function(data) {

})
})

然后我们使用函数体内的 console.log() 方法将数据输出到控制台。

.then(function(data) {
console.log(data);
})

现在我们将添加 catch() 函数以将潜在错误记录到控制台，以防 promise 未实现：

.catch(err {
console.error(err);
});

总而言之，从 GitHub 获取用户存储库列表的请求应如下所示：

const url = 'https://api.github.com/users/fabpot/repos';
fetch(url)
        .then((response) => response.json())
        .then((data) =>
            console.log(data)
        )
        .catch((err) =>
            console.error(err)
        );// JavaScript Document

在上面给出的屏幕截图中，promise 已解决，并且.then()方法的主体已执行。如果由于某种原因 promise 仍未解决，则.catch()方法的主体将被执行，该方法将完成所有错误处理。我们刚刚使用.catch()方法打印了一条错误消息，以防 promise 未实现。

结论

从第三方来源通信和获取数据是 Web 开发的重要组成部分。它是通过使用一个名为 XMLHttpRequest 的复杂工具实现的，该工具会导致回调地狱；现在，一个更简单的工具称为 Fetch API 用于在 Vanilla JavaScript 中发送 AJAX 调用，因为它在处理 AJAX 请求方面要好得多。在这篇文章中，我们学习了使用 Fetch API 方法在 vanilla JavaScript 中进行 AJAX 调用。