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.體積小)