使用 fetch

㈠官方介绍fetch

⑴在Fetch API中说到“The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set”.即Fetch API提供了一个用于获取资源(包括通过网络)的接口。对于任何使用过XMLHttpRequest的人来说，这看起来都很熟悉，但是新的API提供了更强大、更灵活的特性集。

⑵Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

⑶这种功能以前是使用  XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

㈡fetch的使用方法

⑴基本概念

Headers表示响应/请求标头，允许您查询它们并根据结果采取不同的操作。

Request表示资源请求。

Response表示对请求的响应。

⑵基本用法

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

⑶语法：

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

⑷具体示例：

require(‘babel-polyfill‘)
require(‘es6-promise‘).polyfill()
import ‘whatwg-fetch‘
fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String
  response.text().then(function(responseText) { ... })
}, function(error) {
  error.message //=> String
})

⑸具体分析

1.url

定义要获取的资源。这可能是：

• 一个 USVString 字符串，包含要获取资源的 URL。

• 一个 Request 对象。

options（可选）

一个配置项对象，包括所有对请求的设置。可选的参数有：

• method: 请求使用的方法，如 GET、POST。

• headers: 请求的头信息，形式为 Headers 对象或 ByteString。

• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

• credentials: 请求的 credentials，如 omit、same-origin 或者 include。

• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

2.response

一个 Promise，resolve 时回传 Response 对象：

• 属性：

① status (number) - HTTP请求结果参数，在100–599 范围

② statusText (String) - 服务器返回的状态报告

③ ok (boolean) - 如果返回200表示请求成功则为true

④headers (Headers) - 返回头部信息，下面详细介绍

⑤ url (String) - 请求的地址

• 方法：

① text() - 以string的形式生成请求text

② json() - 生成JSON.parse(responseText)的结果

③blob() - 生成一个Blob

④ arrayBuffer() - 生成一个ArrayBuffer

⑤formData() - 生成格式化的数据，可用于其他的请求

• 其他方法：

①clone()

② Response.error()

③ Response.redirect()

3.response.headers

① has(name) (boolean) - 判断是否存在该信息头

② get(name) (String) - 获取信息头的数据

③ getAll(name) (Array) - 获取所有头部数据

④ set(name, value) - 设置信息头的参数

⑤ append(name, value) - 添加header的内容

⑥delete(name) - 删除header的信息

⑦forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

㈢Fetch API 

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

①fetch 方法：用于发起 HTTP 请求

②Request 类：用来描述请求

③Response 类：用来表示响应

④Headers 类：用来表示 HTTP 头部信息

㈣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：表示处理缓存的策略

   ⑴omit：不发生 cookie

   ⑵same-origin： 仅在同源时发生 cookie

   ⑶include：发送 cookie

⑥redirect：发生重定向时候的策略。有以下可选值：referrer： 一个字符串，可以是 no-referrer, client, 或者是一个 URL。默认值是 client。

   ⑴follow：跟随

   ⑵error：发生错误

   ⑶manual：需要用户手动跟随

⑦integrity：包含一个用于验证子资源完整性的字符串。

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

㈤Headers 类

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

var header1 = new Headers({
  
       ‘Content-Type‘: ‘image/jpeg‘,
   
       ‘Accept-Charset‘: ‘utf-8‘

  });

 var header2 = new Headers(header1);

★Headers 实例的方法

①append

对一个字段追加信息，如果该字段不存在，就创建一个。

②delete

删除某个字段

③get

获得某个字段的第一个值

④getAll

获得某个字段所有的值

⑤has

判断是否存在某个字段

⑥set

设置一个字段，如果该字段已经存在，那么会覆盖之前的。

⑦forEach

遍历所有的字段，接受一个回调函数，和可选的第二个参数。可选的第二个参数地值作为回调函数的 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 实例的属性

以下属性均为只读属性。

①method

②url

③headers

④referrer

⑤referrerPolicy：处理来源信息的策略

⑥mode

⑦credentials

⑧redirect

⑨integrity

⑩cache

㈦Response 类

★Response 用来表示 HTTP 请求的响应。

其构造函数形式如下：

var res = new Response(body, init);

// 构造出 Request 对象
var req = new Request(‘https://api.github.com/repos/facebook/react‘,{
  method:‘GET‘
});

// 发起请求，fetch 方法返回一个 Promise 对象
fetch(req).then(function(res){
  // 得到了 response，这里调用 response 的 json 方法
  // 该方法同样返回一个 Promise
  return res.json();
}).then(function(data){
  // 得到解析后的对象
  console.log(data.stargazers_count)
});