一次搞清楚ajax和axios fetch的區別

前端請求基於ajax的時代已逐漸成為將要成為歷史了，es6的fetch和node的axios將會逐漸代替它，本篇博文將就這三者的區別做以比較方便對後兩者的理解和使用。

ajax

$.ajax(,
error: function () {}
});

axios

axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中。

瀏覽器中使用依然是xmlhttprequest物件。

axios(
}).then(function (response) )
.catch(function (error) );

axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端，本質上也是對原生xhr的封裝，只不過它是promise的實現版本，符合最新的es規範，它本身具有以下特徵：

從瀏覽器中建立 xmlhttprequest

支援 promise api

客戶端支援防止csrf

提供了一些併發請求的介面（重要，方便了很多的操作）

從 node.js 建立 http 請求

攔截請求和響應

轉換請求和響應資料

取消請求

自動轉換json資料

注意:防止csrf:就是讓你的每個請求都帶乙個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的**是拿不到你cookie中得key的，這樣，後台就可以輕鬆辨別出這個請求是否是使用者在假冒**上的誤導輸入，從而採取正確的策略。

fetch

fetch是在es6出現的，使用了es6中的promise物件。fetch是基於promise設計的。fetch的**結構比起ajax簡單多了，引數有點像jquery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用xmlhttprequest物件。

try  catch(e)

主要優勢就是：

語法簡潔，更加語義化

基於標準 promise 實現，支援 async/await

同構方便，使用

更加底層，提供的api豐富（request, response）

脫離了xhr，是es規範裡新的實現方式

fetch的不足之處：

fetch只對網路請求報錯，對400，500都當做成功的請求，伺服器返回 400，500 錯誤碼時並不會 reject，只有網路錯誤這些導致請求不能完成時，fetch 才會被 reject。

fetch預設不會帶cookie，需要新增配置項： fetch(url, )

fetch不支援abort，不支援超時控制，使用settimeout及promise.reject的實現的超時控制並不能阻止請求過程繼續在後台執行，造成了流量的浪費

fetch沒有辦法原生監測請求的進度，而xhr可以

另外還有跨域方案不成熟等。

jquery老邁笨拙，fetch年輕稚嫩，只有axios正當其年！