【Fetch API 实用指南】如何使用 Fetch API 执行 HTTP 请求

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

在本指南中，我将向您展示如何使用 Fetch API（ES6+）执行对 REST API 的 HTTP请求，并提供给你最有可能遇到的一些实际示例。

想快速查看 HTTP 示例？ 请直接跳到第5节。第一部分描述了 JavaScript 的异步特性。

注意：所有示例均通过 ES6 的箭头函数实现。

当今的 Web/移动端应用程序中的一种常见模式是从服务器请求，然后显示某些数据（例如用户，帖子，评论，订阅，付款等），然后使用CRUD（创建，读取，更新或删除）操作。

为了进一步操作资源，我们经常使用这些 JS 方法（推荐），例如 .map() , .filter() 和 .reduce() 。

如果您想成为更好的Web开发人员，开始自己的事业，教别人或提高您的开发技能，我将每周发布最新的关于 Web 开发语言的技术和技巧。

这是我们要解决的问题

1. 处理 JavaScript 的异步特性
2. 什么是 AJAX ？
3. 为什么要 Fetch API？
4. 快速介绍 Fetch API
5. Fetch API – CRUD（创建，读取，更新或删除）简单示例 ← 好东西！
6. Fetch API 完全指南

1.处理 JavaScript 的异步特性

理解 JavaScript（JS）如何工作的，最具挑战性的部分之一是处理它的异步特性，因为他没有执行顺序。

在大多数编程语言中，我们都认为操作按顺序（循序的）执行。 必须先执行第一行才能继续下一行。 这是有道理的，因为这是我们人类操作和完成日常任务的方式。

但是使用JS，我们有多个在后台/前台运行的操作，并且我们不能在每次等待用户事件时都停止 Web 应用程序。

然而，有时事情必须按顺序发生，否则会导致混乱和意外结果。 出于这个原因，我们可以使用 promises 和 callback 来构建它。 例如在继续下一个操作之前验证用户凭据。

2.什么是 AJAX ？

AJAX 是 Asynchronous JavaScript and XML 的缩写，即异步的 JavaScript 和 XML ，它允许在应用程序运行时通过与Web服务器交换数据来异步更新网页。 简而言之，它实质上意味着您可以更新网页的各个部分而无需重新加载整个页面（URL保持不变）。

这里说句题外话：AJAX 是一个误导性的名称。 AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输同样很常见。- w3shools.com

AJAX 一路走来？

我已经看到许多开发人员对于在一个页面应用程序(SPA)中拥有所有内容都感到非常兴奋，这也导致了很多异步带来的痛苦！但是幸运的是，我们有一些库，比如 Angular、VueJS 和 React ，这些库使得这个过程更容易一些。

总之，在重新加载整个页面或页面的部分内容之间保持平衡是很重要的。而且在大多数情况下，页面重新加载在功能强大的浏览器中运行良好。回到过去，页面重新加载需要几秒钟(这取决于服务器的位置和浏览器的功能)。但是今天的浏览器速度非常快，所以要决定是执行 AJAX 还是页面重新加载并没有太大的区别。

我个人的经验是，用一个简单的搜索按钮来创建一个搜索引擎要比没有按钮要容易得多，速度也快得多。在大多数情况下，客户并不关心是SPA还是额外的页面重新加载。当然，不要误解我的意思，我确实喜欢 SPA，但它在性能和开发时间方面真的重要吗？

最后，它实际上取决于用例，但我个人认为 SPA 比简单的页面重新加载需要更多的开发时间，同时也带来了一些头痛的问题，因为您需要处理它们的异步特性。但是我想这些可以通过结合几个 promises 的方式来解决，对吧？

3.为什么要 Fetch API ？

这允许我们对服务器执行声明式的 HTTP 请求。 对于每个请求，它会创建一个 Promise ，必须 resolved 该 Promise 以便定义内容类型并访问数据。

现在，Fetch API 的好处是它得到了JS生态系统的完全支持，也是 MDN Mozilla 文档的一部分。最后但并非最不重要的一点是，它在大多数浏览器(IE除外)上都是开箱即用的。从长远来看，我猜它将成为调用 Web API 的标准方式。

Fetch API 与 AJAX 主要有两种不同

1. 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject ， 即使该 HTTP 响应的状态码是 404 或 500 。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
2. 默认情况下， fetch 不会从服务端发送或接收任何 cookies , 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

注意！ 我很清楚其他 HTTP 方法，例如使用带有 RXJS 的 Observable，以及它如何关注订阅/取消订阅等方面的内存管理/泄漏。 也许这将成为执行 HTTP 请求的新标准方式，谁知道呢？

无论如何，在本文中我只关注 Fetch API ，但可能在将来写一篇关于 Observable 和 RXJS 的文章。

4.快速介绍 Fetch API

fetch() 方法返回一个 Promise ，它解析来自 Request 的 Response ，来显示状态（成功或失败）。 如果你曾经在开发者 工具 的控制台日志中得到这样的消息 promise{} ，不要惊慌，它基本上意味着 Promise 起作用了，但是正在等待 resolved 。因此，为了处理 resolve 状态，我们需要 then() 处理程序(回调)来访问内容。

所以简而言之，我们首先定义路径（ Fetch ），其次是从服务器请求数据（ Request ），第三个定义内容类型（ Body ），最后但并非最不重要的是，我们访问数据（ Response ）。

如果你很难理解这个概念，不要担心。 您将通过下面显示的示例来获得更好的理解。

这是我们将用于示例的 API 路径 ：

https://jsonplaceholder.typicode.com/users // 返回 JSON

5.Fetch API – HTTP 示例

如果我们想要访问数据，我们需要两个 .then() 处理程序（回调）。但是如果我们只想要操纵 resource ，我们只需要一个 .then() 处理程序。但是，我们可以使用第二种方法来确保已经发送了值。

基本 Fetch API 模板：

// 模板
fetch(url)
.then(response.something) // 定义响应类型（JSON，Headers 头信息，状态代码）
.then(data) // 显示响应类型 (数据本身)

注意！以上示例仅用于说明目的。如果执行它，代码将不起作用。

Fetch API示例

1. 显示一个用户
2. 显示用户一个列表
3. 创建一个新用户
4. 删除一个用户
5. 更新一个用户

注意！resource 不会真正在服务器上创建，但会返回虚假结果来模仿真实服务器。

5.1.显示一个用户

如前所述，显示单个用户的过程包括两个 .then() 处理程序（回调），第一个用于定义对象，第二个用于访问数据。

请注意，只需读取查询字符串 /users/2 ，我们就能理解/预测 API 的作用。 有关如何编写高质量 REST API 的更多信息，请查看 Mahesh Haldar 撰写的准则提示 。

示例

// 显示一个用户 
fetch('https://jsonplaceholder.typicode.com/users/2') 
.then(response => response.json())
.then(data => console.log(data))

5.2.显示用户列表

该示例与前面的示例几乎相同，只是查询字符串是 /users ，而不是 /users/2 。

示例

// 请求一个用户列表
fetch('https://jsonplaceholder.typicode.com/users/2') 
.then(response => response.json())
.then(data => console.log(data))

5.3.创建一个新用户

这个看起来与前面的例子有点不同。 如果您不熟悉 HTTP 协议，它只是为我们提供了一些很好的方法，如 POST ， GET ， DELETE ， UPDATE ， PATCH 和 PUT 。（查看这里 以了解更多关于 HTTP 请求方法类型的说明 ） 这些方法是简单的动词，描述要执行的操作类型，主要用于操作服务器上的资源/数据。

无论如何，为了使用 Fetch API 创建一个新用户，我们需要使用 HTTP POST 。 但首先，我们需要在某处定义它。 幸运的是，有一个可选的 Init 参数, 我们可以传递给 URL 来定义自定义设置，例如 方法类型，body ，凭据，headers 等。

注意： fetch() 方法的参数与 Request() 构造函数的参数相同。

示例

// 创建一个新用户 
fetch('https://jsonplaceholder.typicode.com/users', { 
method: 'POST', 
body: JSON.stringify({ 
username: 'Elon Musk', 
email:'elonmusk@gmail.com',
userid: 1 
}),    
headers: { "Content-Type": "application/json; charset=utf-8" }
})

5.4.删除一个用户

为了删除一个用户，我们首先需要使用 /users/1 定位用户，然后定义 DELETE 方法类型。

示例

// 删除一个用户
fetch('https://jsonplaceholder.typicode.com/users/1',{ 
method: 'DELETE',
})

5.5.更新一个用户

HTTP PUT 方法类型用于操作目标 resource ，如果要进行部分更改，则需要使用 PATCH 。有关这些HTTP谓词的更多信息，请查看这里 。

示例

// 更新一个用户 
fetch('https://jsonplaceholder.typicode.com/users/3'，{ 
method: 'PUT', 
body: JSON.stringify({ 
username: 'Elon Musk', 
email:'elonmusk@gmail.com',
userid: 1 
}),    
headers: { "Content-Type": "application/json; charset=utf-8" }
})

6.Fetch API 完全指南

看我上面的例子，你可能已经对 Fetch API 有了一定的兴趣，当然肯定也有一些困惑，这部分我们更加详细的介绍 Fetch API 的使用。

6.1.进行 fetch 请求

一个基本的 fetch请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});

这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise(一个 Response 对象)。

当然它只是一个 HTTP 响应，而不是真的 JSON 。为了获取 JSON 的内容，我们需要使用 json() 方法（在Bodymixin 中定义，被 Request 和 Response 对象实现）。

注意：Body mixin 还有其他相似的方法，用于获取其他类型的内容。参考 Body。

6.1.1.支持的请求参数节

fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象，我们来看一下所有可选的配置和更多描述。

// 示例 POST 方法实现
postData('http://example.com/answer', {answer: 42})
.then(data => console.log(data)) // JSON ，来自 `response.json()` 调用
.catch(error => console.error(error))
function postData(url, data) {
// 默认选项用 * 表示
return fetch(url, {
body: JSON.stringify(data), // 必须匹配 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}

6.1.2.发送带凭据的请求节

为了让浏览器发送包含凭据的请求（即使是跨域源），要将 credentials: 'include' 添加到传递给 fetch() 方法的 init 对象。

fetch('https://example.com', {
credentials: 'include'  
})

如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加 credentials: 'same-origin' 。

// The calling script is on the origin 'https://example.com'
fetch('https://example.com', {
credentials: 'same-origin'  
})

要改为确保浏览器不在请求中包含凭据，请使用 credentials: 'omit' 。

fetch('https://example.com', {
credentials: 'omit'  
})

6.1.3.上传 JSON 数据节

使用 fetch() 来 POST JSON 编码的数据。

var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

6.1.4.上传文件

可以使用 HTML <input type =“file”/> input 元素， FormData() 和 fetch() 上传文件。

var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

6.1.5.检测请求是否成功

如果遇到网络故障， fetch() promise 将会 reject ，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true 。类似以下代码：

fetch('flowers.jpg').then(function(response) {
if(response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
var objectURL = URL.createObjectURL(myBlob); 
myImage.src = objectURL; 
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ', error.message);
});

6.1.6.自定义请求对象节

除了传给 fetch() 一个资源的地址，你还可以通过使用 Request() 构造函数来创建一个 request 对象，然后再作为参数传给 fetch() ：

var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});

Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝：

var anotherRequest = new Request(myRequest,myInit);

这个很有用，因为 request 和 response bodies 只能被使用一次（译者注：这里的意思是因为设计成了 stream 的方式，所以它们只能被读取一次）。创建一个拷贝就可以再次使用 request/response 了，当然也可以使用不同的 init 参数。

注意： clone() 方法也可以用于创建一个拷贝。它在语义上有一点不同于其他拷贝的方法。其他方法（比如拷贝一个 response）中，如果 request 的 body 已经被读取过，那么将执行失败，然而 clone() 则不会失败。

6.2.Headers

使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
也可以传一个多维数组或者对象字面量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});

它的内容可以被获取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

虽然一些操作只能在 ServiceWorkers 中使用，但是它提供了更方便的操作 Headers 的 API。

如果使用了一个不合法的HTTP Header属性名，那么Headers的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性，也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如：

var myResponse = Response.error();
try {
myResponse.headers.set("Origin", "http://mybank.com");
} catch(e) {
console.log("Cannot pretend to be a bank!");
}

最佳实践是在使用之前检查 content type 是否正确，比如：

fetch(myRequest).then(function(response) {
if(response.headers.get("content-type") === "application/json") {
return response.json().then(function(json) {
// process your JSON further
});
} else {
console.log("Oops, we haven't got JSON!");
}
});

6.2.1.Guard

由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。

可能的值如下：

• none：默认的
• request：从 request 中获得的 headers（Request.headers）只读
• request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读
• response：从 response 中获得的 headers（Response.headers）只读
• immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。

注意：你不可以添加或者修改一个 guard 属性是 request 的 Request Headers 的 Content-Length 属性。同样地，插入 Set-Cookie 属性到一个 response headers 是不允许的，因此 ServiceWorkers 是不能给合成的 Response 的 headers 添加一些 cookies。

6.3.Response 对象

如上述, Response 实例是在fetch()处理完promises之后返回的.

它的实例也可用通过JavaScript来创建, 但只有在ServiceWorkers中才真正有用,当使用respondWith()方法并提供了一个自定义的response来接受request时:

var myBody = new Blob();
addEventListener('fetch', function(event) {
event.respondWith(new Response(myBody, {
headers: { "Content-Type" : "text/plain" }
});
});

Response() 构造方法接受两个可选参数—response的数据体和一个初始化对象(与Request()所接受的init参数类似.)

你会用到的最常见的response属性有:

• Response.status — 整数(默认值为200) 为response的状态码.
• Response.statusText — 字符串(默认值为”OK”),该值与HTTP状态码消息对应.
• Response.ok — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

注意: 静态方法error()只是返回了一个错误的response. 与此类似地, redirect() 只是返回了一个可以重定向至某URL的response. 这些也只与Service Workers才有关。

6.4.Body

不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.

• ArrayBuffer
• ArrayBufferView (Uint8Array and friends)
• Blob/File
• string
• URLSearchParams
• FormData

Body 类定义了以下方法 (这些方法都被 Request 和Response所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.

• arrayBuffer()
• blob()
• json()
• text()
• formData()

比起XHR来，这些方法让非文本化的数据使用起来更加简单。

请求体可以由传入body参数来进行设置:

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
method: "POST",
body: form
})

request和response（包括fetch() 方法）都会试着自动设置Content-Type。如果没有设置Content-Type值，发送的请求也会自动设值。

6.5.特性检测节

Fetch API 的支持情况，可以通过检测Headers, Request, Response 或 fetch()是否在Window 或 Worker 域中。例如：

if(self.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}

6.6.Polyfill

要在不支持的浏览器中使用 Fetch，可以使用 Fetch Polyfill 。

总结

现在，您已基本了解如何使用 JavaScript 的 Fetch API 从服务器检索或操作 resource，以及如何处理 promise 。 您可以使用本文作为如何构建 CRUD（创建，读取，更新，删除） 操作的 API 请求的指南。

就个人而言，我觉得 Fetch API 是声明性的，你可以很容易地理解发生了什么，即使没有任何技术编码经验。

本文主要内容来自：