零散专题10 Fetch API

简介

Fetch是基于Promise设计的，是属于window对象的方法，可以用来替代Ajax。旧浏览器不支持Promise，需要使用Polyfill进行处理 。

兼容性

目前浏览器对Fetch的原生的支持率并不高，幸运的是，引入下面这些polyfill后可以完美支持IE8+ ：

• 由于IE8是ES3，需要引入ES5的polyfill: es5-shim, es5-sham
• 引入Promise的polyfill: es6-promise
• 引入Fetch探测库：fetch-detector
• 引入Fetch的polyfill: fetch-ie8
• 可选：如果你还使用了Jsonp，引入fetch-jsonp

如果在Node使用，还需要安装node-fetch模块。

使用

一个基本的Fetch请求如下：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

也可以通过Request构造器函数创建一个新的请求对象，这也是建议标准的一部分。第一个参数是请求的URL，第二个参数是一个选项对象，用于配置请求。请求对象一旦创建了，便可以将所创建的对象传递给fetch()方法，用于替代默认的URL字符串。示例代码如下：

const req = new Request(URL, {method: 'GET', cache: 'reload'});

fetch(req).then(function(response) {
  return response.json();
}).then(function(json) {
  insertPhotos(json);
});

上面的代码中指明了请求使用的方法为GET，并且指定不缓存响应的结果。

参数

fetch接受两个参数：

• 第一个参数是请求的目标URL
• 第二个参数是一个配置项对象，包括所有对请求的设置，可选参数有method、headers、mode、credentials、cache等

关于参数的详细说明可以参考MDN的文档。

返回值

Fetch的返回值是一个Promise对象，当这个Promise对象resolve时，在then方法中获得的是一个Resopnse对象。

Response对象中包含了当次请求的相应数据，需要调用对应的方法将Response对象转换为相应格式的数据&