原諒我做一次標題黨料扰，Ajax 不會死凭豪，傳統(tǒng) Ajax 指的是 XMLHttpRequest（XHR），未來現(xiàn)在已被 Fetch 替代晒杈。
最近把阿里一個千萬級 PV 的數(shù)據(jù)產品全部由 jQuery 的 $.ajax
遷移到 Fetch
嫂伞，上線一個多月以來運行非常穩(wěn)定。結果證明拯钻，對于 IE8+ 以上瀏覽器帖努，在生產環(huán)境使用 Fetch 是可行的。
由于 Fetch API 是基于 Promise 設計粪般，有必要先學習一下 Promise拼余，推薦閱讀 MDN Promise 教程。舊瀏覽器不支持 Promise亩歹，需要使用 polyfill es6-promise 匙监。
本文不是 Fetch API 科普貼，其實是講異步處理和 Promise 的小作。Fetch API 很簡單亭姥，看文檔很快就學會了。推薦 MDN Fetch 教程 和 萬能的WHATWG Fetch 規(guī)范

Why Fetch
XMLHttpRequest 是一個設計粗糙的 API顾稀，不符合關注分離（Separation of Concerns）的原則达罗，配置和調用方式非常混亂础拨，而且基于事件的異步模型寫起來也沒有現(xiàn)代的 Promise氮块，generator/yield绍载，async/await 友好诡宗。

Fetch 的出現(xiàn)就是為了解決 XHR 的問題，拿例子說明：

使用 XHR 發(fā)送一個 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(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的 箭頭函數(shù) 后：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

現(xiàn)在看起來好很多了塔沃，但這種 Promise 的寫法還是有 Callback 的影子，而且 promise 使用 catch 方法來進行錯誤處理的方式有點奇怪阳谍。不用急蛀柴，下面使用 async/await 來做最終優(yōu)化：

注：async/await 是非常新的 API，屬于 ES7矫夯，目前尚在 Stage 1(提議) 階段鸽疾，這是它的完整規(guī)范。使用 Babel 開啟 runtime 模式后可以把 async/await 無痛編譯成 ES5 代碼训貌。也可以直接使用 regenerator 來編譯到 ES5制肮。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
// 注：這段代碼如果想運行冒窍，外面需要包一個 async function

duang~~ 的一聲，使用 await
后豺鼻，寫異步代碼就像寫同步代碼一樣爽综液。await
后面可以跟 Promise 對象，表示等待 Promise resolve()
才會繼續(xù)向下執(zhí)行儒飒，如果 Promise 被 reject()
或拋出異常則會被外面的 try...catch
捕獲谬莹。
Promise，generator/yield桩了，await/async 都是現(xiàn)在和未來 JS 解決異步的標準做法附帽，可以完美搭配使用。這也是使用標準 Promise 一大好處井誉。最近也把項目中使用第三方 Promise 庫的代碼全部轉成標準 Promise士葫，為以后全面使用 async/await 做準備。
另外送悔，F(xiàn)etch 也很適合做現(xiàn)在流行的同構應用慢显，有人基于 Fetch 的語法，在 Node 端基于 http 庫實現(xiàn)了 node-fetch欠啤，又有人封裝了用于同構應用的 isomorphic-fetch荚藻。

注：同構(isomorphic/universal)就是使前后端運行同一套代碼的意思，后端一般是指 NodeJS 環(huán)境洁段。

總結一下应狱，F(xiàn)etch 優(yōu)點主要有：
語法簡潔，更加語義化

基于標準 Promise 實現(xiàn)祠丝，支持 async/await

同構方便疾呻，使用 isomorphic-fetch

Fetch 啟用方法
下面是重點↓↓↓
先看一下 Fetch 原生支持率：

引入 Promise 的 polyfill: es6-promise

引入 fetch 探測庫：fetch-detector

引入 fetch 的 polyfill: fetch-ie8

可選：如果你還使用了 jsonp，引入 fetch-jsonp

可選：開啟 Babel 的 runtime 模式叠蝇，現(xiàn)在就使用 async/await

Fetch polyfill 的基本原理是探測是否存在 window.fetch
方法璃岳，如果沒有則用 XHR 實現(xiàn)。這也是 github/fetch 的做法悔捶，但是有些瀏覽器（Chrome 45）原生支持 Fetch铃慷，但響應中有中文時會亂碼，老外又不太關心這種問題蜕该，所以我自己才封裝了 fetch-detector
和 fetch-ie8
只在瀏覽器穩(wěn)定支持 Fetch 情況下才使用原生 Fetch犁柜。這些庫現(xiàn)在每天有幾千萬個請求都在使用，絕對靠譜堂淡！
終于馋缅，引用了這一堆 polyfill 后坛怪，可以愉快地使用 Fetch 了。但要小心股囊，下面有坑：
Fetch 常見坑
Fetch 請求默認是不帶 cookie 的袜匿，需要設置 fetch(url, {credentials: 'include'})

服務器返回 400，500 錯誤碼時并不會 reject稚疹，只有網絡錯誤這些導致請求不能完成時居灯，fetch 才會被 reject。

竟然沒有提到 IE内狗，這實在太不科學了怪嫌，現(xiàn)在來詳細說下 IE
IE 使用策略
所有版本的 IE 均不支持原生 Fetch，fetch-ie8 會自動使用 XHR 做 polyfill柳沙。但在跨域時有個問題需要處理岩灭。
IE8, 9 的 XHR 不支持 CORS 跨域，雖然提供 XDomainRequest
赂鲤，但這個東西就是玩具噪径，不支持傳 Cookie！如果接口需要權限驗證数初，還是乖乖地使用 jsonp 吧找爱，推薦使用 fetch-jsonp。如果有問題直接提 issue泡孩，我會第一時間解決车摄。
標準 Promise 的不足
由于 Fetch 是典型的異步場景，所以大部分遇到的問題不是 Fetch 的仑鸥，其實是 Promise 的吮播。ES6 的 Promise 是基于 Promises/A+ 標準，為了保持簡單簡潔眼俊，只提供極簡的幾個 API意狠。如果你用過一些牛 X 的異步庫，如 jQuery(不要笑) 泵琳、Q.js 或者 RSVP.js摄职，可能會感覺 Promise 功能太少了誊役。
沒有 Deferred
Deferred 可以在創(chuàng)建 Promise 時可以減少一層嵌套获列，還有就是跨方法使用時很方便。ECMAScript 11 年就有過 Deferred 提案蛔垢，但后來沒被接受击孩。其實用 Promise 不到十行代碼就能實現(xiàn) Deferred：es6-deferred。現(xiàn)在有了 async/await鹏漆，generator/yield 后巩梢，deferred 就沒有使用價值了创泄。
沒有獲取狀態(tài)方法：isRejected，isResolved
標準 Promise 沒有提供獲取當前狀態(tài) rejected 或者 resolved 的方法括蝠。只允許外部傳入成功或失敗后的回調鞠抑。我認為這其實是優(yōu)點，這是一種聲明式的接口忌警，更簡單搁拙。
缺少其它一些方法：always，progress法绵，finally
always 可以通過在 then 和 catch 里重復調用方法實現(xiàn)箕速。finally 也類似。progress 這種進度通知的功能還沒有用過朋譬，暫不知道如何替代盐茎。
最后
Fetch 替換 XHR 只是時間問題，現(xiàn)在看到國外很多新的庫都默認使用了 Fetch徙赢。
最后再做一個大膽預測：由于 async/await 這類新異步語法的出現(xiàn)字柠，第三方的 Promise 類庫會逐漸被標準 Promise 替代，使用 polyfill 是現(xiàn)在比較明智的做法狡赐。

原文地址：https://github.com/camsong/blog/issues/2