介绍
JavaScript的Fetch API允许我们发送HTTP请求。自从ECMAScript 2015（通常称为ES6）被引入并使用Promises以来，它一直是JavaScript的标准部分。
本文将首先向您展示在开发Fetch API之前如何使用原始JavaScript发出请求。然后，我们将指导您如何使用Fetch API，重点介绍与其他方法相比有何改进。
建立
本文着眼于使用Fetch API在浏览器中发出HTTP请求。因此，我们需要设置一个我们的浏览器可以显示的HTML页面。在您的工作区中，首先创建一个index.html文件。
该index.html文件将在整个文章中使用。HTML页面没有文本内容，它将仅用于加载JS文件，因此我们可以在浏览器的控制台中查看请求和响应：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript HTTP Requests</title>
</head>
<body>
<script src="./xhr.js"></script>
</body>
</html>
script在学习新主题时，我们将更改标记，但其余的HTML将保持不变。
您还希望打开浏览器控制台，以便我们可以查看HTTP请求的结果。这通常是通过右键单击网页并选择“检查”来完成的。在Chrome上看起来像这样：
现在，让我们选择“控制台”选项卡，以便我们可以看到我们的JavaScript记录的所有输出：
你们都准备好了！让我们开始使用JavaScript- XMLHttpRequest的第一种方法发送HTTP请求。
使用XMLHttpRequest的请求
在Fetch API存在之前，所有JavaScript请求都使用XMLHttpRequest（或XHR）对象完成。尽管其名称，该对象仍可以从服务器检索任何格式的数据。它不仅限于XML。
让我们在浏览器中处理XHR请求。在与文件相同的文件夹中index.html，创建一个新xhr.js文件。
这个新的JavaScript文件将创建XHR对象，并将GET请求发送到JSON API。然后，我们将在控制台中记录请求的结果。在您的xhr.js文件中，输入以下内容：
let xhr = new XMLHttpRequest();
xhr.open('get', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();
xhr.onload = function() {
console.log(xhr.response);
};
在第一行中，我们创建了一个新XMLHttpRequest对象。然后，我们使用该open()方法创建一个新的HTTP请求。的第一个参数open()是请求的HTTP方法-在这种情况下，我们正在发送GET请求。第二个参数是带有所需服务器资源的URL。然后，我们使用该send()方法调度请求。
当XHR成功地从网络中获取数据时，它发送一个负载事件。要在数据加载后进行处理，我们将一个函数设置为对象的onload属性XHR。在这种情况下，我们只需将响应记录到控制台即可。
现在，在开发人员控制台中，您应该看到以下内容。
做好与API请求的工作XMLHttpRequest！
尽管可维护，但它处理异步数据的方式与现代JavaScript中使用的组织化和标准化Promises截然不同。我们可以使用Fetch API维护更简单的代码。
提取API
Fetch API是基于诺言的API，用于发出HTTP请求，与我们使用的类似XMLHttpRequest。与XMLHttpRequest我们不同的是，使用Fetch API时不必创建新对象。浏览器带有一个全局fetch()函数，我们可以使用它来发出请求。
让我们看看如何使用此API通过Internet发出HTTP请求。
通过提取发送请求
该提取API，可以让GET，POST，PUT，PATCH，DELETE和其他种类的HTTP请求。我们将重点介绍HTTP请求中使用的两种最常用的方法：GET和POST。
GET请求
让我们使用Fetch API发出GET请求，https://jsonplaceholder.typicode.com/posts/1就像我们之前所做的XMLHttpRequest那样。
在index.html文件中，更改script标签以引用新的JavaScript文件：
<script src="./fetchGet.js"></script>
现在fetchGet.js，在同一工作区中创建新文件。我们将发送一个GET请求，并将输出再次记录到控制台。在中输入以下代码fetchGet.js：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json));
在第一行中，我们使用全局fetch()函数GET向我们的API发送请求。的参数fetch()是带有服务器端资源的URL。
然后，我们将promise与then()方法链接，该方法捕获response参数中的HTTP响应并调用其json()方法。该json()方法将响应主体解析为JSON对象。但是，它将其作为一种承诺返回。
这就是我们为什么then()再次使用链接另一个promise的原因，该promise将已解析的JSON记录到控制台。
index.html如果需要，请重新加载，这样您将看到以下输出：
注意：输出GET与使用发出请求时得到的输出看起来有所不同XMLHttpRequest。这是因为XMLHttpRequest将HTTP响应数据作为字符串返回，而我们将数据解析为JSON对象。虽然返回的格式不同，但是它们的内容相同。
让我们看看如何使用请求中的fetch()数据POST发送。
POST请求
我们可以fetch()通过添加一个JavaScript对象作为第二个参数来上传数据，并带有发送HTTP请求所需的信息。
让我们使用fetch()将POST请求中的JSON数据上传到模拟API。在index.html文件中，更改script标签以引用新的JavaScript文件：
<script src="./fetchPost.js"></script>
现在fetchPost.js在您的工作空间中创建，以便我们可以POST向API发出请求，该请求将以JSON对象的形式上传新的待办事项。在中输入以下代码fetchPost.js：
const todo = {
title: 'Some really important work to finish'
};
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(json => {
console.log(json);
});
我们要做的第一件事是创建一个todo对象，其中包含我们想要发送到API的数据。
与GET请求一样，我们fetch()通过提供要访问的API的URL来使用。但是，这一次，我们将一个对象作为fetch()具有以下属性的第二个参数：
- method：使用HTTP方法指定要在请求中使用的字符串
- body：包含我们要在请求中提供给服务器的任何数据的字符串
- headers：一个允许我们添加希望HTTP请求包含的标头的对象
与GET请求一样，我们将服务器的响应作为JSON处理并将其记录到开发人员控制台。重新加载我们index.html应该显示以下控制台输出：
fetch()通过POST请求上传数据的出色工作！
现在我们已经掌握了使用Fetch API发出各种HTTP请求的方法，让我们看看如何处理不同的HTTP响应。
使用提取处理响应
到目前为止，我们一直在将响应数据解析为JSON。尽管此方法适用于示例中使用的API，但其他响应可能返回不同类型的非JSON数据。
成功fetch()请求后返回的HTTP响应对象可以解析为各种格式。除了该json()方法外，我们还可以使用以下方法：
- text()：以字符串数据形式返回响应
- blob()：以blob对象形式返回响应（二进制数据及其编码）
- formData()：以FormData对象的形式返回响应（存储字符串数据的键值对）
- arrayBuffer()：将响应返回为ArrayBuffer（二进制数据的低级表示）
像json()方法一样，这些函数返回内容的承诺。因此，它们都必须与一个then()函数链接在一起，以便可以处理内容。
这些函数用于处理返回数据的成功HTTP响应。现在让我们看一下如何使用Fetch API处理错误。
处理HTTP错误
与其他承诺一样，fetch()在catch()承诺链末尾的方法中也会处理错误。但是，catch()仅当fetch()无法发送请求时才使用该功能。这通常意味着存在网络错误。
如果我们尝试访问一个不存在的URL，并且服务器返回404，则该catch()方法将不会捕获该URL ，因为404是有效的HTTP响应状态。
因此，在使用Fetch API处理错误时，我们需要做两件事：
- catch()在promise链的末尾包含该子句以获取任何网络错误
- 检查响应的HTTP状态代码以查看是否成功。
让我们再举一个例子，尝试获取一个不存在的URL。
使用我们的GET请求示例，我们可以这样使用catch()：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.error(err));
但是，catch()仅当fetch()无法发送请求时才使用该功能。在您的index.html文件中，更改脚本标记以引用新的JavaScript文件：
<script src="./fetchError.js"></script>
现在在您的工作区中创建一个新fetchError.js文件。输入以下代码：
fetch("https://jsonplaceholder.typicode.com/notreal/")
.then(response => {
if (!response.ok) {
throw new Error("Could not reach website.");
}
return response.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));
我们首先GET向该API上不存在的URL发送请求。请注意第一个then()函数的更改，该函数将响应主体解析为JSON：
if (!response.ok) {
throw new Error("Could not reach website.");
}
我们检查该ok属性，它是布尔值。它是true如果响应的HTTP状态代码是200-299之间。通过使用not运算符（!），我们可以捕获服务器返回HTTP错误的情况。如果确实收到HTTP错误，则会抛出一个自定义错误，该错误将终止fetch()Promise链。
如果没有收到HTTP错误，我们将像以前一样返回JSON响应作为承诺。
在Promise链的末尾，我们有一个catch()函数，该函数仅将错误记录到控制台。
如果重新加载index.html页面，应该会看到以下控制台输出：
做得好，您介绍了Fetch API的基础知识。
结论
Fetch API提供了一种基于承诺的方式，以JavaScript发送HTTP请求。由于它是基于承诺的，因此开发人员将其视为的更干净的替代品XMLHttpRequest。
随着fetch()功能，我们可以GET和POST要求不同的网址。我们可以将fetch()请求配置为使用我们要使用的任何HTTP方法。
该fetch()函数还提供了一个response可以解析为各种格式的对象。其中包括JSON，文本和字节等。
我们还看到了使用发出请求时如何处理错误fetch()。除了将catch()方法放在承诺链的末尾以拾取网络错误之外，我们还应该在解析其数据之前检查收到的HTTP响应的状态代码。
Fetch API使外部API调用可管理，而无需使用外部库。您打算使用哪些API fetch()？
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
