ajax、axios和fetch的區別

1.jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

　　傳統Ajax指的是XMLHttpRequest（XHR），最先出現的發送後端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間若是有前後關係的話，就會出現回調地域。

　　jQuery ajax 是對原生XHR的封裝，除此以外還增長了對jsonp的支持。

　　缺點:

　　　　一、自己是針對MVC的編程，不符合如今的前端MVVM的浪潮。

　　　　二、基於原生的XHR開發，XHR自己的架構不清晰

　　　　三、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);
});

 

　　Vue2.0以後，尤雨溪推薦你們用axios替換JQuery ajax，想必讓axios進入了不少人的目光中。

　　axios是一個基於promise用於瀏覽器和nodejs的HTTP客戶端，本質上也是對原生XHR的封裝，只不過它是promise的實現版本，符合最新的ES規範，它自己具備如下特徵：

　　一、從瀏覽器中建立XMLHttpRequerst

　　二、支持promise API

　　三、客戶端支持防止CSRF（防止CSRF：就是讓你的每一個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就能夠輕鬆辨別出這個請求是不是用戶在假冒網站上的誤導輸入，從而採起正確的策略。）

　　四、提供了一些併發請求的接口（重要，方便了不少的操做）

　　五、從 nodejs 建立 http 請求

　　六、攔截請求和響應

　　七、轉換請求和響應數據

　　八、取消請求

　　九、自動轉換json數據

3.fetch

fetch('/getList')
      .then(res => res.json())
      .then(res => {
           console.log(res)
       })

　　fetch號稱是ajax的替代品，是es6出現的，使用了es6中的promise對象。fetch是基於promis設計的。fetch的代碼結構比起ajax簡單，參數有點像jQuery ajax。可是，必定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XHR對象。

　　fetch的優勢：
　　　　1.符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏
　　　　2.更好更方便的寫法

　　總結：axios既提供了併發的封裝，也沒有fetch的各類問題，並且體積也較小，當之無愧如今最應該選用的請求的方式。