今天在幫同事找bug時(shí)充尉，發(fā)現(xiàn)問題。前臺(tái)請(qǐng)求到后臺(tái)只盹，后臺(tái)通過HttpServletRequest獲取用戶session信息辣往，發(fā)現(xiàn)session傳過來的是空，通過百度殖卑，發(fā)現(xiàn)fetch請(qǐng)求與ajax請(qǐng)求的區(qū)別站削，坑終于填了，記錄一下孵稽。
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開發(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
客戶端支持防止CSRF
提供了一些并發(fā)請(qǐng)求的接口（重要园细，方便了很多的操作）
3.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)：
優(yōu)點(diǎn)：
符合關(guān)注分離，沒有將輸入接校、輸出和用事件來跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里
更好更方便的寫法
更加底層珊肃，提供的API豐富（request, response）
脫離了XHR，是ES規(guī)范里新的實(shí)現(xiàn)方式
缺點(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)求過程繼續(xù)在后臺(tái)運(yùn)行皿淋，造成了量的浪費(fèi)
fetch沒有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度招刹，而XHR可以
