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

個人網站 https://iiter.cn 程式設計師導航站 開業啦，歡迎各位觀眾姥爺賞臉參觀，如有意見或建議希望能夠不吝賜教！

將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

這裡有324.57GB的修仙資料。嘿嘿嘿你懂得。/手動狗頭

掃二維碼加為好友就完事了！安排~