对于fetch的理解

在一篇文章里见到一位作者是这么说的

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

Fetch的出现就是为了解决XHR的问题

首先我们分析XHR发送一个请求的方式

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.responseType = 'json';

xhr.onload = function() {

  console.log(xhr.response);

};

xhr.onerror = function() {

  console.log("Oops, error");

};

xhr.send();

然而使用了Fetch后

fetch(url).then(function(response) {

  return response.json();

}).then(function(data) {

  console.log(data);

}).catch(function(e) {

  console.log("Oops, error");

});

再将其变成es6的箭头函数

fetch(url).then(response => response.json())

  .then(data => console.log(data))

  .catch(e => console.log("Oops, error", e))

这样看起来就少了很多，可看性很好，但是作者不是很满意，说这种promise的写法有callback的影子，并且prominse使用catch来精选错误处理的方式有点奇怪，于是乎他就用上了async/await

这里需要说明一下async/await是ES7的新API，可以用bable编译成ES5代码，使用await外面不包async会报错

let url="xxxxxxx";

async function main(){

  try {

    let response = await fetch(url);

    let data = response.json();

    console.log(data);

  } catch(e) {

    console.log("Oops, error", e);

  }

 }

对于fetch跨域需要设置mode

mode有三个取值

same-origin 不允许跨域
cors 允许跨域,需服务器配合如 node.js
no-cors 允许跨域，服务器不需要设置如上代码但不能将服务端数据返回

当然fetch和xhr也是有区别的

fetch是有兼容性问题的，对ie不是很友好

fetch不管请求成功还是失败，都会触发promise的resolve状态回调，fetch只有在网络故障导致的发送请求失败或者跨域才会触发reject的逻辑，我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

fetch配置请求是否携带cookie和接受服务端写入cookie是通过设置credentials // include, same-origin, *omit

fetch不想xhr可以原生支持异步请求，fetch因为默认是一个promise的对象。所以如果想用同步的写法，可以借助async await 来实现。

文章引用：

传统ajax已死，fetch永生

巴特西

对于fetch的理解

最新文章

热门文章