XMLHttpRequest的最新替代技术——Fetch API

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

• 使用 XHR 发送一个 json 请求一般是这样：

  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(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))
  

现在看起来好很多了，但这种 Promise 的写法还是有 Callback 的影子，而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急，下面使用 async/await 来做最终优化：

  try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
  } catch(e) {
      console.log("Oops, error", e);
  }

总结一下，Fetch 优点主要有:

1. 语法简洁，更加语义化

2. 基于标准 Promise 实现，支持 async/await

3. 同构方便，使用 isomorphic-fetch

Fetch 常见坑:

1. Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
2. 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

文章摘自 [传统 Ajax 已死，Fetch 永生]