JavaScript异步编程之XHR与fetch

个人github github.com/zhuanyongxi…

AJAX模型

图片左侧的部分是有AJAX以前的浏览器与服务器交互的方式，是同步的，发出请求以后须要等待，这样的体验就很是很差。AJAX的出现改变了这一状况，由不一样变成了异步，发出请求以后再也不须要等待。

XHR

这是最通用的AJAX的API，完整的写法是XMLHttpRequest。虽然名字里面有XML，可它所支持的数据类型不仅是XML。

经常使用的几步：

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState);	// readyState will be 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState);	// readyState will be 1

xhr.onprogress = function() {
  console.log('LOADING', xhr.readyState);	// readyState will be 3
};
xhr.onreadystatechange = function() {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.onload = function() {
  console.log('DONE', xhr.readyState);	// readyState will be 4
}
复制代码

你确定在想我这是从哪抄的代码吧？从MDN上抄的，连接是这个。其中open这个api的第三个参数默认值是true，也就是异步，false就是同步。一般都是使用异步。另外还要知道一些经常使用的http的状态码如：200、30一、30二、30四、400、40一、40四、500、501。

fetch

与XHR相比，fetch基于promise，写法更加简洁优雅，它能够更好的支持更多的场景，如service workers、Cache API等。

相信不少人也都用过axios，与axios相比，fetch这个api，总结一下就是：好用的功能都须要本身写。好比拦截器，自动转换数据格式等。不过这自己也没什么比较的必要，由于他们的定位不一样，fetch是js的api，编程语言的api，确定会作的很基础，目光放的更长远；而axios是一个第三方的方法库，它存在的意义就是在现有api的基础上作一次封装，增长一些好用的方法，不过axios封装的是XHR，并非fetch。

再抄一波代码，对比fetch与XHR：

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写：

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

在加上ES6的箭头函数：

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

简单多了吧？

不过这里有一个须要注意的地方，fetch只有遇到网络错误或服务端cors未配置的时候才会reject，就是说像500、404这样的错误，fetch是不会reject的。解决方法就是用response.ok：

fetch("http://httpstat.us/500")
  .then(function(response) {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response;
  }).then(function(response) {
    console.log("ok");
  }).catch(function(error) {
    console.log(error);
  });
复制代码

一个能够参考的对fetch的简单的封装：

const options = {
  headers: new Headers({'Content-Type': 'application/json'}),
  cache: 'default',
  method: 'GET',
  mode: 'cors'
}

function get(url, params) {
  const opts = Object.assign({}, options, {method: 'GET'});
  return fetch(`${url}?${querystring.stringify(params)}`, opts)
    .then(data => data.json());
}

function post(url, params) {
  const opts = Object.assign({}, options, {method: 'POST', body: JSON.stringify(params)});
  return fetch(url, opts)
    .then(data => data.json());
}
复制代码

这一段也是抄的，但我不告诉你我是在哪抄的。

使用fetch须要注意的几个地方：

• 默认不带cookie，本身加；

  fetch(url, {
    credentials: 'include'
  })
  复制代码

• 不支持同步；

• 不支持取消；

• 没法查看请求进度。

参考资料：

• Introduction to fetch()
• That's so fetch!
• fetch 没有你想象的那么美
• Handling Failed HTTP Responses With fetch()