Fetch API

Fetch API 提供了能够用于操作一部分 HTTP 管道的 JavaScript 接口，比如 requests 和 responses。它同时也提供了一个全局的 fetch() 方法——能够简单的异步的获取资源

浏览器支持情况

• Firefox 39 以上
• Chrome 42 以上
• 对于不支持的浏览器，可以使用Fetch Polyfil

功能检测

通过检测 Headers、Request、Response 或 fetch() 是否在 Window 或 Worker 域中

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

具体分析

fetch api包含了四个接口，如下:

• GlobalFetch
• Headers
• Response
• Request

GlobalFetch

GlobalFetch包含了一个Fetch方法，而我们发送请求或者获取资源都需要使用这个方法，而GlobalFetch在很多接口中都被实现了，比如 Window 和 WorkerGlobalScope。所以在各种环境中都可以用这个方法获取到资源。

• 语法

  fetch(input, init).then(function(response) { ... });

  • input: 定义要获取的资源【string, response对象】
  • init: 一个配置项对象，包括所有对请求的设置【method, headers, body, mode, credentials, cache】
  • fetch函数会返回一个Promise对象来处理response，response中包含着一个Response对象

fetch(URL, {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

Headers

Headers类允许你去对HTTP request和response headers执行各种操作。 这些操作包括：检索, 设置, 添加和删除。

• 构造器
  • Headers.Headers()：创建一个新的Headers对象

• 方法

  • append(name, value)：给现有的header添加一个值, 或者添加一个未存在的header并赋值, 如果指定header不存在, append()将会添加这个header并赋值 . 如果指定header已存在并允许有多个值, append()将会把指定值添加到已有值队列的末尾,注意这里的name是不区分大小写的

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'image/jpeg');
  myHeaders.get('Content-Type'); //"image/jpeg"
  myHeaders.append('Content-Type', 'image/gif');
  myHeaders.getAll('Content-Type'); //["image/gif", "image/jpeg"]

  • delete(name)：从Headers对象中删除指定header，注意这里的name是不区分大小写的

  ...
  myHeaders.delete('Content-Type');
  myHeaders.getAll('Content-Type'); // []

  • entries()：以迭代器的形式返回Headers对象中所有的键值对

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'text/xml');
  myHeaders.append('Vary', 'Accept-Language');
  for (var pair of myHeaders.entries()) {
     console.log(pair[0]+ ': '+ pair[1]);
  } //content-type: text/xml vary: Accept-Language

  • has(name): 返回一个布尔值来表示一个Header对象是否包含特定的header, 注意这里的name是不区分大小写的

  var myHeaders = new Headers();
  myHeaders.has('Content-Type');//false
  myHeaders.append('Content-Type', 'image/jpeg');
  myHeaders.has('Content-Type'); //true

  • keys(): 以迭代器的形式返回Headers对象中所有存在的header名

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'text/xml');
  myHeaders.append('Vary', 'Accept-Language');
  for(var key of myHeaders.keys()) {
     console.log(key); //content-type vary
  }

  • set(name, value): 替换现有的header的值, 或者添加一个未存在的header并赋值, 与append的区别是, 如果name存在, 则这个方法会重写掉存在的值, 而append只是添加到后面

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'image/jpeg');
  myHeaders.set('Content-Type', 'text/html');
  myHeaders.get('Content-Type'); //"text/html"
  

  • values(): 以迭代器的形式返回Headers对象中所有存在的header的值

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'text/xml');
  myHeaders.append('Vary', 'Accept-Language');
  for (var value of myHeaders.values()) {
     console.log(value); // text/xml Accept-Language
  }

  • get(): 从Headers对象中返回指定header的第一个值
  • getAll(): 以数组的形式从Headers对象中返回指定header的全部值

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

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

Request

相当于一个资源请求

• 构造器：

  • Request.Request()：创造一个新的Request对象
  • 使用方法：new Request(input, init)
  • input：你希望获取资源的URL或者一个Request Object
  • init：可选，对request的用户自定义，可选值[method, headers, body, mode, credentials, cache, redirect, referrer, integrity]

  var myInit = { method: 'GET',
             headers: {
                 'Content-Type': 'image/jpeg'
             },
             mode: 'cors',
             cache: 'default' };
  
  var myRequest = new Request('flowers.jpg', myInit);

• 属性

  • method: 只读，请求使用的方法 (GET, POST, 等.)

  var myRequest = new Request('flowers.jpg');
  var myMethod = myRequest.method; // GET

  • url: 只读，请求使用的 URL

  var myRequest = new Request('flowers.jpg');
  var myURL = myRequest.url;

  • headers: 只读，包括request的Header Object

  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'image/jpeg');
  
  var myInit = { method: 'GET',
                     headers: myHeaders,
                     mode: 'cors',
                     cache: 'default' };
  
  var myRequest = new Request('flowers.jpg',myInit);
  
  myContentType = myRequest.headers.get('Content-Type');  //"image/jpeg"

  • context: 只读，包含request的context，即获取资源的类型，比如audio, image, iframe等，这个只和 ServiceWorker API相关
  • referrer：只读，对应init里面的referrer，有 about:client, no-referrer, 或者 URL
  • mode：只读，对应init里面的mode，展示是否允许跨域，有cors, no-cors, same-origin
  • credentials：只读，对应于init里面的credentials，展示了cookies是否能跨域得到，有omit, same-origin, include
  • redirect：只读，对应于init里面的redirect，展示了如何处理重定向，有follow, error, 和manual
  • integrity：只读，对应于init里面的integrity，展示了资源完整性验证码。比如sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
  • cache：只读，对应于init里面的cache，有default, reload, no-cache等
  • bodyUsed：只读，保存的是一个布尔值，用来表示在response中body是否已经被使用。

• 方法

  • clone()：Request和Response的body只能被读取一次！它们有一个属性叫bodyUsed，读取一次之后设置为true，就不能再读取了

  var res = new Response("one time use");
  console.log(res.bodyUsed); // false
  res.text().then(function(v) {
    console.log(res.bodyUsed); // true
  });
  console.log(res.bodyUsed); // true
  
  res.text().catch(function(e) {
    console.log("Tried to read already consumed Response");
  });

  这样设计的目的是为了之后兼容基于流的API，让应用一次消费data，这样就允许了JavaScript处理大文件例如视频，并且可以支持实时压缩和编辑。那如果我们需要多次使用body呢？比如我们希望用cache去缓存然后提供离线使用，因此提供了clone()这个方法，调用这个方法可以得到一个克隆对象。不过要记得，clone()必须要在读取之前调用，也就是先clone()再读取。

  var res = new Response("one time use");
  console.log('res1 ' + res.bodyUsed); // false
  var clone = res.clone();
  console.log('clone1 ' + clone.bodyUsed); //false
  res.text().then(function(v) {
    console.log('res ' + res.bodyUsed); // true
  });
  console.log('resnow ' + res.bodyUsed); // true
  console.log('clonenow ' + clone.bodyUsed); //false
  
  clone.text()
    .then(function(v){    
      console.log('clone' + clone.bodyUsed)}) //true
    .catch(function(e) {
      console.log("Tried to read already consumed Response");
  });

  • 无论response还是request都能处理body。我们来看下body。

    • body可以是以下任何一种类型的实例
      • ArrayBuffer
      • ArrayBufferView
      • Blob/File
      • 字符串
      • URLSearchParams
      • FormData——目前不被Gecko和Blink支持，Firefox预计在版本39和Fetch的其他部分一起推出
    • 为body提供的方法，这些方法都返回一个Promise对象
      • arrayBuffer()：读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为ArrayBuffer格式的promise对象
      • blob()
      • formData()
      • json()
      • text()
    • 在使用非文本的数据方面，Fetch API和XHR相比提供了极大的便利。可以通过传body参数来设置Request的body

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

Response

呈现了对一次请求的响应数据, Response实例通常在fetch()的回调中获得。但是它们也可以用JS构造，不过通常这招只用于ServiceWorkers。

• 构造器

  • Response.Response()
  • 使用方法：new Response(body, init)
  • body：一个定义response中body的对象，可以是[Blob, BufferSource, FormData, URLSearchParams, USVString]
  • init: 一个参数(options)对象，包含要应用到response上的任何自定义设置, 可能是[status, statusText, headers]

  var myBlob = new Blob();
  var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
  var myResponse = new Response(myBlob,init);

• 属性

  • type：它的值可能是"basic","cors","default","error"或者"opaque" 【只读】
    • "basic": 正常的，同域的请求，包含所有的headers除开"Set-Cookie"和"Set-Cookie2"。
    • "cors": Response从一个合法的跨域请求获得，一部分header和body可读。
    • "error": 网络错误。Response的status是0，Headers是空的并且不可写。当Response是从Response.error()中得到时，就是这种类型。
    • "opaque": Response从"no-cors"请求了跨域资源。依靠Server端来做限制。
    • "default": 为"basic";
  • url: 包含Response的URL 【只读】
  • useFinalURL: 包含了一个布尔值来标示这是否是该Response的最终URL
  • status: 包含Response的状态码 【只读】
  • ok: 包含了一个布尔值来标示该Response成功(状态码200-299) 还是失败 【只读】
  • statusText: 包含了与该Response状态码一致的状态信息 【只读】
  • headers: 包含此Response所关联的Headers 对象 【只读】
  • bodyUsed: 包含了一个布尔值来标示该Response是否包含一个Body 【只读】

• 方法

  • clone()：创建一个Response对象的克隆

  var image1 = document.querySelector('.img1');
  var image2 = document.querySelector('.img2');
  
  var myRequest = new Request('flowers.jpg');
  
  fetch(myRequest).then(function(response) {
    var response2 = response.clone();
  
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      image1.src = objectURL;
    });
  
    response2.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      image2.src = objectURL;
    });
  });

  • error(): 返回一个绑定了网络错误的新的Response对象
  • redirect(): 用另一个URL创建一个新的 response

其它注意点

• 有些浏览器（Chrome 45）原生支持 Fetch，但响应中有中文时会乱码，可以使用下面这几行代码来探测是否支持fetch

  var  userAgent  =  navigator.userAgent  ||  "";
  var  appVersion  =  navigator.appVersion  ||  "";
  var  vendor  =  navigator.vendor  ||  "";
  var  ua  =  (userAgent  +  "  "  +  appVersion  +  "  "  +  vendor).toLowerCase();
  
  var  match  =  /(chrome)[  \/]([\w.]+)/.exec(ua)
              ||  /(webkit)[  \/]([\w.]+)/.exec(ua)
              ||  /(opera)(?:.*version|)[  \/]([\w.]+)/.exec(ua)
              ||  /(msie)  ([\w.]+)/.exec(ua)
              ||  /(trident)(?:.*?  rv:([\w.]+)|)/.exec(ua)
              ||  ua.indexOf("compatible")  <  0
              &&  /(mozilla)(?:.*?  rv:([\w.]+)|)/.exec(ua)  ||  [];
  
  var  engine  =  match[0];
  var  mainVersion  =  match[2].split(".")[0];
  //  chrome  内核版本大于  46，  firefox  版本大于39  才开启  fetch
  if  (engine.indexOf("chrome")  ===  0  &&  mainVersion  >=  46)  {
      window.__disableNativeFetch  =  false;
  }  else  if  (engine.indexOf("mozilla")  ===  0  &&  mainVersion  >=  39)  {
      window.__disableNativeFetch  =  false;
  }  else  {
      window.__disableNativeFetch  =  true;
  }

• Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

• 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject

• 所有版本的 IE 均不支持原生 Fetch, fetch-ie8 会自动使用 XHR 做 polyfill

总结与XMLHttpRequest的区别

• API的设计更加简洁

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'json';
  
  xhr.onload = function() {
    console.log(xhr.response);
  };
  
  xhr.onerror = function() {
    console.log("Booo");
  };
  
  xhr.send();

  fetch(url).then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function() {
    console.log("Booo");
  });

  fetch(url).then(r => r.json())
  .then(data => console.log(data))
  .catch(e => console.log("Booo"))

  (async() => {
    try {
      var response = await fetch(url);
      var data = await response.json();
      console.log(data);
    } catch (e) {
      console.log("Booo")
    }
  })();

• Fetch API足够底层，因为当前的WHATWG标准定义了XMLHttpRequest.send()方法其实等同于fetch的Requset对象。 Fetch中的Response.body实现了getReader()方法用于渐增的读取原始字节流。

  function streamingDemo() {
  //当数据全部被读完后会将done标记设置为true。 在这种方式下，每次你只需要处理一个chunk，而不是一次性的处理整个响应体。
      var req = new Request(URL, {method: 'GET', cache: 'reload'});
      fetch(req).then(function(response) {
          var reader = response.body.getReader();
          return reader.read();
      }).then(function(result, done) {
          if (!done) {
          // do something with each chunk
          }
      });
  }

• 对于传统的XMLHttpRequest而言，你必须使用它的一个实例来执行请求和检索返回的响应。在这种情况下请求和响应基本没法分开，但是通过Fetch API，我们还能够明确的配置请求对象。Request和Response都完全遵循HTTP标准。因此你可以通过Service Worker API将响应发送给你自己。 Service Worker允许通过截取来自浏览器的请求头和提供本地构造的响应头来替换来自服务器的响应头的方式来构建离线应用。除此之外，还可以使用缓存里的内容。

  self.addEventListener('fetch', function(event) {
    if (event.request.url === new URL('/', location).href) {
      event.respondWith(
        new Response("<h1>Hello!</h1>", {
          headers: {'Content-Type': 'text/html'}
        })
      )
    }
  });

• Fetch提供了对'no-cors'的简单处理，当然下面这种情况也无法获取response内部的资源。但这种情况对缓存还是有用的。

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.baidu.com');
  xhr.responseType = 'json';
  
  xhr.onload = function() {
    console.log('here');
    console.log(xhr.response);
  };
  
  xhr.onerror = function() {
    console.log("Booo");
  };
  
  xhr.send();
  //XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.zhihu.com' is therefore not allowed access.
  // "Booo"

  fetch('https://www.baidu.com', {
    mode: 'no-cors'
  }).then(function(response) {
    console.log(response.type); // "opaque"
  });

• XHR缺少流的处理，在request进行时，你可以得到.responseText，但是整个响应还是在缓存进内存，但是使用Fetch，可以获取底层的body流

• Fetch和其他新的API共同使用能发挥更大的作用，比如Cache API，Stream API

• Fetch有Header Class，可以修改读取headers，并且提供了ES6的迭代器来操作

一些不足

• 当headers到达之前没发中断请求
• 没有Progress events，只能自己监听Content-Length来实现

参考文献

• 这个API很“迷人”——(新的Fetch API)
• Fetch API
• That's so fetch!
• 深入浅出Fetch API
• XMLHttpRequest Living Standard — Last Updated 24 October 2016
• 传统 Ajax 已死，Fetch 永生
• Fetch API