ajax、axios、fetch之間的區別以及優缺點
阿新 • • 發佈:2018-12-10
將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