Fetch

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Fetch相关的知识,希望对你有一定的参考价值。

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

 

以上是关于Fetch的主要内容,如果未能解决你的问题,请参考以下文章

回归 | js实用代码片段的封装与总结(持续更新中...)

如何使用 fetch 从一个模块导出从 GET API 获得的响应数据到另一个模块

TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段

齐博分类系统漏洞分析

以下代码中的 .from(20).fetch(10) 是啥?

git fetch 的简单用法:更新远程代码到本地仓库