Ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
優(yōu)點(diǎn)：
1.Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)
2.在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下禽车，能夠更新部分網(wǎng)頁(yè)的技術(shù)
缺點(diǎn)：
- 本身是針對(duì)MVC的編程寇漫，不符合現(xiàn)在前端MVVM的浪潮
- 基于原生的XHR開發(fā)，XHR本身的架構(gòu)不清晰殉摔，已經(jīng)有了fetch的代替方案
- jQuery整個(gè)項(xiàng)目太大州胳，單純使用ajax卻要引入整個(gè)jQuery非常不合理(采取個(gè)性化打包的方案不能享受CDN服務(wù))
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
- 客戶端支持防止CSRF(就是讓你的每個(gè)請(qǐng)求都帶一個(gè)從cookie中拿到的key,根據(jù)瀏覽器同源策略，假冒的網(wǎng)站是拿不到你cookie中的key的逸月，這樣后臺(tái)就可以輕松辨別出這個(gè)請(qǐng)求是否是用戶在假冒網(wǎng)站上的誤導(dǎo)輸入栓撞，從而采取正確的策略)
- 提供了一些并發(fā)請(qǐng)求的接口
Fetch
try {
let response = await fetch(url);
let data = 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ì)象里
- 更好更方便的寫法
- 更加底層瓤湘，提供的API豐富
- 脫離了XHR，是ES規(guī)范里新的實(shí)現(xiàn)方式
- 【重要】fetch中可以設(shè)置mode為"no-cors"(不跨域)
缺點(diǎn)： - fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)肛响，對(duì)400,500都當(dāng)做成功的請(qǐng)求岭粤，需要封裝去處理
- fetch默認(rèn)不會(huì)帶cookie,需要添加配置項(xiàng)
- fetch不支持abort,不支持超時(shí)控制，使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行特笋，造成了流量的浪費(fèi)
- fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以
