JS之Fetch

细节叙述见如下连接：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

1 基本概念： 

WindowOrWorkerGlobalScope.fetch()用于获取资源的方法。

Headers表示响应/请求标头，容许您查询它们并根据结果采起不一样的操做。

Request表示资源请求。

Response表示对请求的响应。

2. Fetch API 

Fetch API 包含一组类和方法，用来简化 HTTP 请求。其中包含如下方法和类：

 

• fetch 方法：用于发起 HTTP 请求
• Request 类：用来描述请求
• Response 类：用来表示响应
• Headers 类：用来表示 HTTP 头部信息。

 

基本用法

fetch 接受一个 url 做为参数，发起 GET 请求，返回 Promise ,请求成功后将返回结果封装为一个 Response 对象，该对象上具备一些方法（好比 json 方法），调用 json 方法后一样返回一个 Promise 对象，并用解析 json 字符串获得的对象来 resolve。

1 fetch('https://api.github.com/repos/facebook/react').then(function(res){ 2     return res.json(); 3 }).then(function(data){ 4  console.log(data) 5 });

fetch 方法

fetch 方法有两种调用方法，第一个参数能够是一个 Request 对象，也能够是一个简单的 url，第二个参数是可选参数，包含一些配置信息。

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

可选的配置信息能够一个简单对象，能够包含下列字段：

• method: 请求的方法, 好比： GET, POST
• headers：请求头部信息，能够是一个 Headers 对象的实例，也能够是一个简单对象
• body: 任何但愿发送的信息，能够是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。须要注意的是 GET 和 HEAD 方法不能包含 body。
• mode：请求的模式，能够取这几个值：cors, no-cors, same-origin, navigate
  • same-origin：只容许同源的请求，不然直接报错
  • cors：容许跨域，但也要要求响应中 Access-Control-Allow-Origin 这样的头部信息表示容许跨域，响应中只有部分头部信息能够读取，但响应内容能够不受限地读取。
  • no-cors：只容许使用 HEAD、 GET 和 POST 方法，且 JavaScript 不容许访问 response 中的内容。ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers。
  • navigate：用于支持页面导航。一般使用不到。
• credentials：表示是否发送 cookie，有三个可选值 omit, same-origin, includecache：表示处理缓存的策略，关于此能够参考 https://fetch.spec.whatwg.org
  • omit：不发生 cookie
  • same-origin： 仅在同源时发生 cookie
  • include：发送 cookie
• redirect：发生重定向时候的策略。有如下可选值：referrer： 一个字符串，能够是 no-referrer, client, 或者是一个 URL。默认值是 client。
  • follow：跟随
  • error：发生错误
  • manual：须要用户手动跟随
• integrity：包含一个用于验证子资源完整性的字符串。关于此，能够参看 Subresource Integrity 介绍

该函数返回一个 Promise 对象，若请求成功会用 Response 的实例做为参数调用 resolve ，若请求失败会用一个错误对象来调用 reject。

Headers 类

Headers 类用来表示 HTTP 的头部信息，其构造函数能够接受一个表示 HTTP 头信息的对象，也能够接受一个 Headers 类的实例做为对象：

1 var header1 = new Headers({ 2   'Content-Type': 'image/jpeg', 3   'Accept-Charset': 'utf-8'
4 }); 5 
6 var header2 = new Headers(header1);

Headers 实例的方法

append

对一个字段追加信息，若是该字段不存在，就建立一个。

1 var header = new Headers(); 2 header.append('Accept-Encoding', 'deflate'); 3 header.append('Accept-Encoding', 'gzip'); 4 // Accept-Encoding: ['deflate', 'gzip']

delete

删除某个字段

get

得到某个字段的第一个值

var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.get('Accept-Encoding'); //=> 'deflate'

getAll

得到某个字段全部的值

var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.getAll('Accept-Encoding'); //=> ['deflate', 'gzip']

has

判断是否存在某个字段

set

设置一个字段，若是该字段已经存在，那么会覆盖以前的。

forEach

遍历全部的字段，接受一个回调函数，和可选的第二个参数。可选的第二个参数地值做为回调函数的 this 值。

var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.forEach(function(value, name, header){ //...
},this);

Request 类

Request 对象用于描述请求内容。构造函数接受的参数和 fetch 函数的参数形式同样，实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。

下面例子从 github 抓取到 react 的 star 数并打印出来。

var req = new Request('https://api.github.com/repos/facebook/react',{ method:'GET' }); fetch(req).then(function(res){ return res.json() }).then(function(data){ console.log(data.stargazers_count) });

Request 实例的属性

如下属性均为只读属性。这些属性的意义均在上面介绍 fetch 的参数的时候有过说明。

• method
• url
• headers
• referrer
• referrerPolicy：处理来源信息的策略，关于此能够参见Referrer Policy
• mode
• credentials
• redirect
• integrity
• cache

Response 类

Response 用来表示 HTTP 请求的响应。其构造函数形式以下：

var res = new Response(body, init);

其中 body 能够是：

• Blob
• BufferSource
• FormData
• URLSearchParams
• USVString

init 是一个对象，其中包括如下字段：

• status：响应的状态码，好比 200，404
• statusText：状态信息，好比 OK
• headers: 头部信息，能够是一个对象，也能够是一个 Headers 实例

Response 实例属性

如下属性均为只读属性

• bodyUsed：用于表示响应内容是否有被使用过
• headers：头部信息
• ok：代表请求是否成功，当响应的状态码是 200~299 时，该值为 true
• status：状态码
• statusText：状态信息
• type：代表了响应的类型，多是下面几种值：url：响应的地址
  • basic： 同源
  • cors：跨域
  • error：出错
  • opaque：Request 的 mode 设置为 “no-cors” 的响应

方法

• clone：复制一个响应对象

要想从 Response 的实例中拿到最终的数据须要调用下面这些方法，这些方法都返回一个 Promise 而且使用对应的数据类型来 resolve。

• arrayBuffer：把响应数据转化为 arrayBuffer 来 resolve
• blob：把响应数据转换为 Blob 来 resolve
• formData：把响应数据转化为 formData 来 resolve
• json：把响应数据解析为对象后 resolve
• text：把响应数据当作字符串来调用 resolve

总结

最后在把上面使用例子进行一个细致的说明：

 1 // 构造出 Request 对象
 2 var req = new Request('https://api.github.com/repos/facebook/react',{  3   method:'GET'
 4 });  5 
 6 // 发起请求，fetch 方法返回一个 Promise 对象
 7 fetch(req).then(function(res){  8   // 获得了 response，这里调用 response 的 json 方法
 9   // 该方法一样返回一个 Promise
10   return res.json(); 11 }).then(function(data){ 12   // 获得解析后的对象
13  console.log(data.stargazers_count) 14 });