在网络开发中，你经常需要与其他网络服务器连接/沟通以获得信息/数据。例如，在一些网站上注册一个新账户时，你经常会看到一个选项，即使用你的Gmail或其他第三方账户进行注册。这使你只需点击一下就能注册一个新账户，而不是手动填写整个表格。当你选择 "使用第三方账户注册 "选项时，应用程序就会与第三方应用程序的服务器进行通信，并发送请求以访问存储在那里的你的信息。这个请求是通过API发送的，API是一组规则，管理不同的应用程序或系统如何相互通信。在这篇文章中，我们将学习如何使用JavaScript来发送这样的请求。
什么是Fetch API
Fetch API在JavaScript中提供了一个简单的fetch() 方法，用于获取、访问和操作网络上的资源。fetch() 方法允许你用JavaScript进行异步的JavaScript和XML（AJAX）调用，这些调用以前是用XMLHttpRequest进行的。异步请求与主程序平行运行，不会停止下面代码的执行。即使API没有发回任何响应，Fetch API请求下面的代码也会继续运行。当API对AJAX调用做出响应时，那么fetch() 方法就会恢复。
Fetch API使用承诺并提供了强大的功能，这使得处理网络请求及其响应变得更加容易；它是避免使用XMLHttpRequest时产生的回调地狱的好方法。
**注意：**本文中的例子是用浏览器控制台来演示的。
JavaScript中Fetch API的语法
我们需要调用fetch() 方法，以便在我们的JavaScript代码中使用Fetch API。fetch() 方法将API的URL作为参数。
fetch(URL)
我们需要在fetch() 方法之后定义then() 方法。
.then(function() {
})
fetch()方法的返回值是一个承诺。如果该承诺被解决，那么then() 方法的主体中的代码就会被执行。then() 方法的主体应该包含可以处理API发送的数据的代码。
然后我们需要定义catch() 方法；**catch()**方法只在承诺被拒绝时执行。
.catch(function() {
});
总而言之，fetch() 方法应该看起来像这样。
fetch(url)
.then(function() {
})
.catch(function() {
});
现在我们已经了解了Fetch API的语法，现在我们可以进入现实世界的例子，在一个真正的API上使用fetch**()**方法。
如何使用Fetch方法从API中获取数据
在这个例子中，我们将使用GitHub用户的API来获取用户信息数据，并在控制台中显示出来，只使用普通的JavaScript；所以让我们开始吧。
首先，我们将创建一个名为 "url"的变量；这个变量将保存API的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的用户的仓库。我们将GitHub用户API的URL作为参数传给了Fetch 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()函数来记录潜在的错误到控制台，以防承诺未被履行。
.catch(err {
console.error(err);
});
总而言之，从 GitHub 获取用户仓库列表的请求应该是这样的。
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.catch(err {
console.error(err);
});
在上面的截图中，承诺被解决了，.then() 方法的主体被执行。如果由于某种原因承诺没有被解决，那么**.catch()** 方法的主体就会被执行，它将完成所有的错误处理。我们只是用**.catch()** 方法来打印一条错误信息，以防承诺未被履行。
总结
从第三方来源通信和获取数据是网络开发的一个重要部分。它是通过使用一个名为XMLHttpRequest的复杂工具来实现的，该工具会导致回调地狱；现在，一个名为Fetch API的更简单的工具被用来在Vanilla JavaScript中发送AJAX调用，因为它在处理AJAX请求方面要好得多。在这篇文章中，我们已经学会了使用Fetch API方法来在vanilla JavaScript中进行AJAX调用。
