將jQuery的ajax、axios和fetch做個簡單的比較,所謂仁者見仁智者見智,最終使用哪個還是自行斟酌
1.jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
優缺點:
本身是針對MVC的編程,不符合現在前端MVVM的浪潮
基於原生的XHR開發,XHR本身的架構不清晰,已經有了fetch的替代方案
JQuery整個項目太大,單純使用ajax卻要引入整個JQuery非常的不合理(采取個性化打包的方案又不能享受CDN服務)
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);
});
優缺點:
從 node.js 創建 http 請求
支持 Promise API
客戶端支持防止CSRF
提供了一些並發請求的接口(重要,方便了很多的操作)
3.fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
優缺點:
符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象里
更好更方便的寫法
更加底層,提供的API豐富(request, response)
脫離了XHR,是ES規范里新的實現方式
1)fetchtch只對網絡請求報錯,對400,500都當做成功的請求,需要封裝去處理
2)fetch默認不會帶cookie,需要添加配置項
3)fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在后台運行,造成了量的浪費
4)fetch沒有辦法原生監測請求的進度,而XHR可以
為什么要用axios?
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特征:
從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止CSRF/XSRF
