FetchAPI的用法

FetchAPI的⽤法

前⾔

Fetch API是新的ajax解决⽅案，⽤于解决古⽼的XHR对象不能实现的问题。

主要优点：

语法简单，更加语义化

基于标准的Promis实现，⽀持async/await

本⽂注意事项：

本⽂假设你已经学习过Promis和async/await，如果没有，请参看我对Promis的理解和异步编程终极⼤法async/await⼊门。

本⽂假设你已经通过搜索引擎阅读过⼀点关于Fetch API的知识，并且试图讲⼀些别⼈不常讲的。

适⽤浏览器

可见，浏览器的⽀持并不好，可以说相当不巩华城 好，不过你可以使⽤各种垫⽚（polyfill）来实现Fetch API，具体可以搜索⼀下。不

fetch api polyfill

过，我建议：

如果你可以保证你项⽬的⽤户都在使⽤现代浏览器，那么你可以直接⽤Fetch API。

如果你的项⽬还要兼容IE8，那么趁早直接⽤jQuery，省⼼。

如果只需要兼容IE9以上，还有Axios可以让你选择。

当然，你随时可以选择⽤垫⽚。

最简单典型的⽤法

本⽂假设⼀个服务器环境，有⼀个和⼀个。

fetch('')

.then(function(res) {

().then(function(data) {

(data);

});

})

.catch(function(erbehalf r) {

('Fetch Error : %S', err);

})

Fetch API跟Promis的关系

(fetch('')); // 返回⼀个Promi对象

两者关系就⼀句话：fetch()本⾝就返回⼀个Promi对象。所以，它就可以⽤Promis的所有⽅法。

fetch的参数

第⼀个参数：毫⽆疑问是要获取资源的URL。

第⼆个参数：options对象，包括：

methodGET、``POST。

: 请求使⽤的⽅法，如

headersHeadersByteString

: 请求的头信息，形式为 的对象或包含 值的对象字⾯量。

bodyBlobBufferSourceFormDataURLSearchParamsUSVString

: 请求的 body 信息：可能是⼀个 、、、 或者 对象。注意 GET 或 HEAD ⽅

法的请求不能包含 body 信息。

modecors、no-corssame-origin。

: 请求的模式，如 或者

credentialsomitsame-origininclude

: 请求的 credentials，如 、 或者 。为了在当前英语动词有哪些 域名内⾃动发送 cookie ， 必须提供这个选项， 从

Chrome 50 开始， 这个属性也可以接受 实例或是⼀个 实例。

Federated这支烟灭了以后 CredentialPasswordCredential

cachedefaultno-store 、reload 、no-cache 、force-cacheonly-if-cached 。

: 请求的 cache 模式: 、 或者

redirectfollowerrormanual

: 可⽤的 redirect 模式: (⾃动重定向), (如果产⽣重定向将⾃动终⽌并且抛出⼀个错误), 或者 (⼿动处理重定向).

在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。

referrerUSVStringno-referrerclientclient

: ⼀个 ，可以是 、或⼀个URL。默认是 。

referrerPolicyno-referrer、no-referrer-when-downgrade、origin、

: Specifies the value of the referer HTTP header. May be one of

origin-when-cross-origin、unsafe-url 。

integritysha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=

: 包括请求的 subresource integrity 值 （ 例如： ）。

上⾯诸多option中，其实常⽤的就是、、以及等。

methodheadersbodymode

headers

可以为Headers对象，也可以是⼀个对象字⾯量，通常情况下对象字⾯量就⾜够。

按下F12，查看Network，查看某个请求，可以看到请求头的内跑步多少公里合适 容，⽐如：

Accept:*/*

Accept-Encoding:gzip, deflate, br

Accept-Language:zh-CN,zh;q=0.9

Connection:keep-alive

Content-Length:208

Content-Type:application/x歌颂祖国的演讲稿 -www-form-urlencoded; chart=UTF-8

......

设置请求头的伪代码例⼦：

var url = '......';

var headers = {

Accept: 'image/jpeg'

};

fetch(url, {个人能力介绍 headers: headers}).then(function () {

// ...

})

body

也就是请求体，从上⽂可以看到，⽀持的请求体格式⾮常多，也⽀持⽂件上传。可以把⽂件转为blob，也可以把⽂件添加到FormData对象中，

然后上传。

mode

1. 表⽰必须同源，绝对禁⽌跨域，这个是⽼版本浏览器默认的安全策略。

same-origin

fetch('', {

mode: 'same-origin'

}).then(function (respon) {

(respon);

});

2. 表⽰允许跨域，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求。只需要服务器的响应头中带有

corsAccess-Control-Allow-

Origin: *

就⾏。

fetch('外域/', {

mode: 'cors'

}).then(function (respon) {

(respon);

});

3. 这个就很特殊了，字⾯意思是禁⽌以CORS的形式跨域，其实它的效果是，对外域的请求可以发送，外域服务器⽆论设不设

no-corsAccess-

Control-Allow-Origin: *

都会接收请求并处理请求泉涓涓而始流 ，但是浏览器不接收响应，即使外域返回了内容，浏览器也当做没接到。

这个的⽤途是保证数据安全。

no-cors

fetch('外域.com/', {

mode: 'no-cors'

}).then(function (respon) {

(respon);

});

Respon

从上⾯截图可以看到，传给then的回调函数可以接收⼀个参数，这个参数就是Respon，它的属性基本上是只读属性。

上图中看不到的是Respon的⽅法，它的⽅法如下：

()

创建⼀个Respon对象的克隆

()

返回⼀个绑定了⽹络错误的新的Respon对象

ct()

⽤另⼀个URL创建⼀个新的 respon.

uffer()

读取 Respon对象并且将它设置为已读（因为Respons对象被设置为了 stream 的⽅式，所以它们只能被读取⼀次） ,并返回⼀个被解析为

ArrayBuffer格式的promi对象

()

读取 Respon对象并且将它设置为已读（因为Respons对象被设置为了 stream 的⽅式，所以它们只能被读取⼀次） ,并返回⼀个被解析为

Blob格式的promi对象

ta()

读取Respon对象并且将它设置为已读（因为Respons对象被设置为了 stream 的⽅式，所以它们只能被读取⼀次） ,并返回⼀个被解析为

FormData格式的promi对象

()

读取 Respon对象并且将它设置为已读（因为Respons对象被设置为了 stream 的⽅式，所以它们只能被读取⼀次） ,并返回⼀个被解析为

JSON格式的promi对象

()

读取 Respon对象并且将它设置为已读（因为Respo晚安韩文 ns对象被设置为了 stream 的⽅式，所以它们只能被读取⼀次） ,并返回⼀个被解析为

USVString格式的promi对象