ajax、axios、fetch之間的詳細區別以及優缺點

 

將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服務）

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

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