ajax、axios、fetch之間的區別與聯繫

整理ajax、axios、fetch優缺點

簡單總結

• JavaScript是一門前端語言
• AJAX是一門技術，它提供了異步更新的機制，使客戶端與服務器間交換數據而非整個頁面文檔，實現頁面的局部更新。
• jQuery是一個框架，它對JavaScript進行了封裝，使得JavaScript更加方便使用。jQuery使得JavaScript和AJAX的使用更加方便。

AJAX

https://www.w3school.com.cn/ajax/index.asp 

AJAX（Asynchronous JavaScript and XML）（異步的 JavaScript 和 XML）。AJAX不是新的編程語言，而是一種使用現有標準的新方法。AJAX 是一種在無需重新加載整個網頁的情況下，通過後臺與服務器進行少量數據交換，能夠異步更新部分網頁的技術。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。XMLHttpRequest 是 AJAX 的基礎。

var xmlhttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", 'http://xxx', true);
// 如果需要像 HTML 表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=小王&age=18");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  } else {
    console.error("請求錯誤");
  }
}

jQuery ajax

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地爲網站提供AJAX交互。這裏的 ajax 是jQuery庫裏面封裝好的函數，是對原生XHR的封裝，除此以外還增添了對JSONP的支持。

$.ajax({
   type: 'POST',
   url: 'http://xxx',
   data: {
        name: '小王',
        age: '18'
   },
   success: function () {},
   error: function () {}
});

優缺點：

• 本身是針對MVC的編程，不符合現在前端MVVM的浪潮
• 基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案
• JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（採取個性化打包的方案又不能享受CDN服務）

儘管JQuery對我們前端的開發工作曾有着（現在也仍然有着）深遠的影響，但是我們可以看到隨着VUE，REACT新一代框架的興起，以及ES規範的完善，更多API的更新，JQuery這種大而全的JS庫，未來的路會越走越窄。

axios

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端

axios({
    method: 'post',
    url: url,
    data: {
        name: '小王',
        age: '18'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Vue2.0之後，推薦大家用axios替換JQuery ajax，讓Axios進入了很多人的目光中。Axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止CSRF/XSRF

這個支持防止CSRF其實挺好玩的，是怎麼做到的呢，就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就可以輕鬆辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而採取正確的策略。

Axios既提供了併發的封裝，也沒有下文會提到的fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式。

fetch

fetch號稱是AJAX的替代品，可以參考《傳統 Ajax 已死，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規範裏新的實現方式

fetch是一個低層次的API，你可以把它考慮成原生的XHR，所以使用起來並不是那麼舒服，需要進行封裝，例如：

• fetch只對網絡請求報錯，對400，500都當做成功的請求，需要封裝去處理
• fetch默認不會帶cookie，需要添加配置項
• fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，造成了量的浪費
• fetch沒有辦法原生監測請求的進度，而XHR可以
• https://segmentfault.com/a/1190000012836882