1.jQuery ajax?
$.ajax({
? type: 'POST',
? url: url,
? data: data,
? dataType: dataType,
? success: function () {},
? error: function () {}
});
優(yōu)缺點(diǎn):
本身是針對(duì)MVC的編程,不符合現(xiàn)在前端MVVM的浪潮
基于原生的XHR開(kāi)發(fā)菠劝,XHR本身的架構(gòu)不清晰,已經(jīng)有了fetch的替代方案
JQuery整個(gè)項(xiàng)目太大睁搭,單純使用ajax卻要引入整個(gè)JQuery非常的不合理(采取個(gè)性化打包的方案又不能享受CDN服務(wù))
2.axios
axios({
method:'post',
url:'/user/12345',
data: {
firstName:'Fred',
lastName:'Flintstone'
? ? }
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
優(yōu)缺點(diǎn):
從 node.js 創(chuàng)建 http 請(qǐng)求
支持 Promise API
客戶(hù)端支持防止CSRF
提供了一些并發(fā)請(qǐng)求的接口(重要赶诊,方便了很多的操作
3.fetch
try{
????letresponse =awaitfetch(url);
????letdata = response.json();
????console.log(data);
}catch(e) {
????console.log("Oops, error", e);
}
優(yōu)缺點(diǎn):
符合關(guān)注分離笼平,沒(méi)有將輸入、輸出和用事件來(lái)跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里
更好更方便的寫(xiě)法
更加底層舔痪,提供的API豐富(request, response)
脫離了XHR寓调,是ES規(guī)范里新的實(shí)現(xiàn)方式
1)fetchtch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò),對(duì)400锄码,500都當(dāng)做成功的請(qǐng)求夺英,需要封裝去處理
2)fetch默認(rèn)不會(huì)帶cookie,需要添加配置項(xiàng)
3)fetch不支持abort滋捶,不支持超時(shí)控制痛悯,使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行,造成了量的浪費(fèi)
4)fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度重窟,而XHR可以
為什么要用axios?
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶(hù)端载萌,它本身具有以下特征:
從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請(qǐng)求
支持 Promise API
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶(hù)端支持防止CSRF/XSRF