70.Fetch 与 Ajax 的对比

[goldEli]

• Fetch 不支持 IE
• Fetch 基于 Promise 对象，支持 async/await，代码更为简洁

[nanslee]

导读

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好，而 Fetch API 是基于 Promise 设计，对于 IE8+ 以上浏览器，生产环境使用 Fetch 也是可行的。

// Ajax 
const xhr = new XMLHttpRequest();
xhr.open('get', url);     // post 则需在 send 前设置请求头
xhr.send(null);
xhr.onreadystatechange = () => {
  if(xhr.status === 200 && xhr.readyState === 4) {
    // ...
  }
}

// Fetch
fetch(url).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
}).catch(e => {
  console.log("Oops, error");
});

重点

以上都讲述了 Fetch 相较 Ajax 的优势，那么劣势呢？

• Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

• 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

• 不支持超时中断