js:ajax、axios、fetch的區別

原生ajax

核心 XMLHttpRequest(XHR)

缺點:
寫法複雜,回調地獄等等

jquery ajax

JQuery ajax 是對原生XHR的封裝,除此以外還增添了對JSONP的支持。

缺點:
1.本身是針對MVC的編程,不符合現在前端MVVM的浪潮
2.基於原生的XHR開發,XHR本身的架構不清晰。
3.JQuery整個項目太大,單純使用ajax卻要引入整個JQuery非常的不合理(採取個性化打包的方案又不能享受CDN服務)
4.不符合關注分離(Separation of Concerns)的原則
5.配置和調用方式非常混亂,而且基於事件的異步模型不友好。

axios

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,本質上也是對原生XHR的封裝,只不過它是Promise的實現版本,符合最新的ES規範

優點:
1.從瀏覽器中創建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口(重要,方便了很多的操作)
5.從 node.js 創建 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據

Vue2.0之後,尤雨溪推薦大家用axios替換JQuery ajax

fetch

fetch不是ajax的進一步封裝,而是原生js,沒有使用XMLHttpRequest對象。
Fetch是基於promise設計的

缺點:
1)fetch只對網絡請求報錯,對400,500都當做成功的請求,服務器返回 400,500 錯誤碼時並不會 reject,只有網絡錯誤這些導致請求不能完成時,fetch 纔會被 reject。
2)fetch默認不會帶cookie,需要添加配置項: fetch(url, {credentials: ‘include’})
3)fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行,造成了流量的浪費
4)fetch沒有辦法原生監測請求的進度,而XHR可以

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章