使用JavaScript Fetch API发送HTTP请求

介绍

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>

<head>

<title>JavaScript HTTP Requests</title>

</head>

<body>

</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文件：

现在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文件：

现在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文件：

现在在您的工作区中创建一个新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()？

使用JavaScript Fetch API发送HTTP请求相关推荐

【Fetch 】深度剖析 JavaScript Fetch API
概览在Web开发中,经常需要与服务器进行数据交互,而 Fetch API 是一种基于 Promise 的现代API,用于在网络中发送和接收请求.笔者将深入介绍 Fetch API 的工作原理,从网络 ...
使用fetch封装请求_关于如何使用Fetch API执行HTTP请求的实用ES6指南
使用fetch封装请求 In this guide, I'll show you how to use the Fetch API (ES6+) to perform HTTP requests to ...
微信小程序Api发送网络请求(request)
微信小程序发送网络请求(request) 下边的地址是微信小程序开发平台对网络请求的介绍. 微信小程序网络请求介绍最近公司要求开发小程序,下面是我查看微信小程序文档,写的一个demo,记录下来方便以 ...
python post请求 415_接收错误415:使用REST API发送GET请求时不支持媒体类型
我已经创建了一些python代码来与Exact在线通信,并希望通过使用python和urllib2来发送GET和POST请求.在现在,当我尝试发送一个简单的GET请求时,它包含诸如"Acc ...
用JavaScript fetch API取数据遇到CORS policy问题
当把请求的url从上图替换成https://localhost:8080后出错: No 'Access-Control-Allow-Origin' header is present on the r ...
如何使用js(Javascript)发送http请求,以及xhr和fetch的区别
如何使用js(Javascript)发送http请求你可以使用 JavaScript 内置的 XMLHttpRequest 对象或较新的 fetch API 发送 HTTP 请求.以下是使用每种方法 ...
如何通过JavaScript发送http请求
JavaScript 是一种广泛使用的编程语言,可用于创建丰富的互联网应用程序.其中之一的常见任务是与后端服务器进行通信,以获取或发送数据.在本文中,我们将讨论如何使用 JavaScript 发送 H ...
ES6 Fetch API和Cookie相关的知识点
Jerry Wang曾经写过一篇比较web应用处于stateful和stateless不同状态下的行为差异,发表在SAP社区上: https://blogs.sap.com/2017/03/31/st ...
使用fetch函数发送ajax
回到文章总目录使用fetch函数发送ajax请求 MDN文档地址中文文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWork ...

使用JavaScript Fetch API发送HTTP请求

使用JavaScript Fetch API发送HTTP请求相关推荐

最新文章

热门文章