Jquery ajax, Fetch, Axios比較匯總

Ajax:最原始的方式,基于原生的js

XmlHttpRequest:多個請求之間如果有先后關(guān)系,會存在很多層回調(diào)的問題,也是基于原生js

Jquery Ajax:基于原生XHR封裝,依賴Jquery框架,由jquery 框架去封裝原生的XML(Xml)封裝的API,支持JSONP

(優(yōu)點:1.功能齊全,使用方便;

缺點:1.是MVC編程的一種請求方式,不符合現(xiàn)在前端的MVVC的浪潮;

2.基于原生的XHR開發(fā),XHR本身的架構(gòu)不清晰,已經(jīng)有了fetch的替代方案;

3.依賴Jquery框架,對項目來說過重了。)

Fetch:基于原生XHR封裝,在ES6 出現(xiàn),是Ajax的替代品,使用了ES6的promise 對象,所以可以使用then 和catch,

(優(yōu)點:1.更加底層,API很豐富;

2.脫離XHR,是ES規(guī)范里新的實現(xiàn)方式;

3.但是對于跨域的處理,fetch可以設(shè)置mode:"no-cors"?

缺點:1.fetch是低底層的API,類似于XHR,所以用起來不方便,還得自己封裝;

2對于網(wǎng)絡(luò)報錯的錯誤碼400 500 都會當作成功的操作,會進入then,而不是catch,所以需要自己封裝;

3.fetch 默認不帶cookie,需要自己添加配置項目credentials: 'include';

4.fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行,造成了流量的浪費;

5.fetch沒有辦法原生監(jiān)測請求的進度,而XHR可以)

axios:對原生XHR的封裝,需要進行安裝,可以在客戶端使用,也可以在node端使用,基于promise對象,所以可以使用then和catch

(優(yōu)點:1.基于promise的實現(xiàn)版本,符合最新的ES規(guī)范;

2.支持promise 的api;

3.客戶端支持防止CSRF,就是讓你的每個請求都帶一個從cookie中拿到的key,根據(jù)瀏覽器同源策略,假冒的網(wǎng)站拿不到你cookie中得到key,這樣,后臺就可以輕松辨別出這些請求是否是用戶在假冒網(wǎng)站上的誤導收入,從而采取正確的措施;

4.提供了一些并發(fā)請求的接口,axios.all;

5.體積小)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容