Fetch漫游指南--篇2

大家好，由于最近比较忙，直到今天我才有时间写第二篇关于fetch的介绍。今天我将继续为大家介绍Fetch API，现在我先大概列出我们接下来会看到的内容：

1. response对象;
2. 自定义request()对象;
3. fetch的异常处理;
4. fetch的兼容实现方案;

一.Response对象

Fetch API 的Response接口呈现了对一次请求的响应数据，Response实例是在fetch()处理完promises之后返回的。

正如上述MDN所说，Response实例是在fetch处理完promise后才返回的，所以我们在一般想拿到数据都会做类似以下处理(我以处理json数据为例)：

fetch(URL)
        .then(res => res.json()) 
        .then(res => {
    console.log("data", res)})
        .catch(err => {
    console.log("error", err)})

通常情况下，我们会使用到response对象的以下属性:

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

记住Response.ok这个参数，后面在fetch的异常处理中我们会用到它。

---

二.自定义Request()对象

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

语法如下：
var myRequest = new Request(input, init);

参数解释：
1.input:定义你想要fetch的资源。可以是下面两者之一:

• 一个直接包含你希望fetch的资源的URL的 USVString¹.
• 一个 Request 对象.

2.init(可选)

• method: 请求的方法，例如：GET, POST。
• headers: 任何你想加到请求中的头，其被放在Headers对象或内部值为ByteString 的对象字面量中。
• body: 任何你想加到请求中的body，可以是Blob, BufferSource, FormData, URLSearchParams, 或 USVString对象。注意GET 和 HEAD请求没有body。
• mode: 请求的模式, 比如 cors, no-cors, same-origin, 或 navigate。默认值应该为 cors。但在Chrome中，Chrome47之前的版本默认值为no-cors，自Chrome47起，默认值为same-origin。
• credentials: 想要在请求中使用的credentials：:omit,same-origin,或include。默认值应该为omit。但在Chrome中，Chrome 47 之前的版本默认值为 same-origin ，自Chrome 47起，默认值为include。
• cache: 请求中想要使用的cache mode
• redirect: 对重定向处理的模式： follow, error, or manual。在Chrome中，Chrome 47 之前的版本默认值为 manual ，自Chrome 47起，默认值为follow。
• referrer: 一个指定了no-referrer,client,或一个URL的USVString。默认值是client.
• integrity: 包括请求的subresourceintegrity值(eg:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

3.实例

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;
});

上面的实例比较简单易懂，需要注意的是这个地方，cache: 'default'²

三.Fetch的异常捕捉

自XHR起，封装一个详尽的错误捕捉机制一直都是个令人头疼的事儿，当然，早就有人把这个头疼的事给做了，古代有jquery ajax，现代也有类似axios这之类抛出promise的库。对fetch来说，它是一个足够底层的原生模块，足够底层，也就意味着更大的自由，以及更繁琐的封装过程。

我们一般情况下是这么创建一个fetch请求的(我以最普遍的json数据流为例)：

fetch