1. 程式人生 > 實用技巧 >ajax、axios、fetch之間的詳細區別以及優缺點

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