XMLHttpRequest和fetch比較

一直以來前端向後臺請求資料用的都是XMLHttpRequest,但這個API設計得其實不是很好。Fetch的出現就是為了彌補XMLHttpRequest的不足。
XMLHttpRequest文件
Fetch文件
傳統上如果我們發起請求會這麼寫

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.log('出錯了');
};
xhr.send();

fetch的寫法是這樣的

fetch(url).then(function (response) {
  return response.json();
}).then(function (jsonData) {
  console.log(jsonData);
}).catch(function () {
  console.log('出錯了');
});

fetch的特點

直觀上看fetch主要有這幾個特點：
1.基於Promise實現的介面，避免了ajax的回撥地獄

2.以資料流的形式返回資料，資料量大和傳輸大檔案有優勢

3.Fetch API引入三個新的物件（也是建構函式）：Headers, Request和Response。headers用於設定請求頭還是比較方便的。瀏覽器其實是不怎麼需要構造請求和處理響應的，這個角度看request和response比較雞肋。但隨著Service Worker的部署，以後瀏覽器也可以向Service Worker發起請求

4.cors的支援，fetch的response.type有三種不一樣的狀態。basic：正常的同域請求，cors：CORS機制下的跨域請求，opaque：非CORS機制下的跨域請求，這時無法讀取返回的資料，也無法判斷是否請求成功

ajax的封裝

原生的XMLHttpRequest並不是很好用，不少庫都對其進行了封裝。比較常見的有jQuery和axios
jQuery的特點在於可以實現jsonp跨域
axios則是實現了Promise鏈式呼叫

fetch的不足

首先是現在fetch的相容性還不是很好，可能需要配置polyfill
其次fetch沒辦法像XMLHttpRequest一樣取消請求的傳送