Fetch

Posted 2020-10-09

Fetch API

　　Fetch API提供了fetch()方法，它被定义再BOM的window对象中，你可以用它来发起远程资源的请求，类似于Ajax。该方法返回的是一个Promise对象，让你能够对请求返回结果进行检索。

为了能够进一步的解释Fetch API，下面我们写一些代码来具体的介绍它的用法：

var URL = ‘。。。。。‘;

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

　　上面的代码看起来很简单：首先是构造请求的URL，然后将URL传递给全局的fetch()方法，它会立刻返回一个Promise，当Promise被通过，它会返回一个Response对象，通过该对象的json()方法可以将结果作为JSON对象返回。response.json()同样会返回一个Promise对象，因此再我们的例子中可以继续链接一个then()方法。

　　为了能够和传统的XMLHttpRequest进行对比，我们使用传统的方法编写一个同样功能的函数：

function xhrDemo() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        insertPhotos(JSON.parse(xhr.responseText));
    };
    xhr.open(‘GET‘, URL);
    xhr.send();
}

　　可以发现，主要的不同点在于：传统上我们会使用事件处理器，而不是Promise对象。并且请求的发起完全依赖于xhr对象所提供的方法。但是Fetch API不止与此。

为什么需要替代XMLHttpRequest

　　看了前面的例子，你可能会问，为什么不直接使用那些现有的XMLHttpRequest包装器呢？原因在于Fetch API不仅仅为你提供了一个fetch()方法。

　　对于传统的XMLHttpRequest而言，你必须使用它的一个实例来执行请求和检索返回的响应。但是通过Fetch API，我们还能够明确的配置请求对象。

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

var req = new Request(URL, {method: ‘GET‘, cache: ‘reload‘});
fetch(req).then(function(response) {
  return response.json();
}).then(function(json) {
  insertPhotos(json);
});

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

　　有关Request对象的另一件更酷的事在于，你还可以基于原有的对象创建一个新的对象。新的请求和旧的并没有什么不同，但你可以通过稍微调整配置对象，将其用于不同的场景。例如，你可以基于原有的GET请求创建一个POST请求，它们具有相同的请求源。代码如下：

 // 基于req对象创建新的postReq对象
  var postReq = new Request(req, {method: ‘POST‘});

　　每个Request对象都有一个header属性，在Fetch API中它对应了一个Headers对象。 通过Headers对象，你能够修改请求头。不仅如此，对于返回的响应，你还能轻松的返回响应头中的各个属性。 但是需要注意的是，响应头是只读的。

var headers = new Headers();
headers.append(‘Accept‘, ‘application/json‘);
var request = new Request(URL, {headers: headers});
 
fetch(request).then(function(response) {
    console.log(response.headers);
});