axios,fetch,ajax區別

Jquery中的ajax

1 $.ajax({ 2 type:"get", 3 url:"", 4 async:true, 5 data:{}, 6 dataType:"", 7 success:function(){ 8 } 9 });

type 以什麼樣的方式獲取數據，是get或post
url 必填項，規定把請求發送到哪一個 URL。
axync true/false，默認是tue異步請求，false同步。異步請求$.ajax執行後，纔會繼續執行ajax後面的腳本，服務器返回數據以後，纔會觸發success的成功回調，即單個線程。同步請求：全部的請求都爲同步。
data 可選。像服務器發送請求時一塊兒過去的參數。通常是post請求時攜帶的用戶名或者id。
dataType 可選。規定預期的服務器響應的數據類型。
默認執行智能判斷（xml、json、script 或 html）。

success 可選。執行成功時返回的數據。
 

 

  

 優缺點：

是基於XHR原生開發的，目前已有的fetch可替代。自己是針對mvc的編程模式，不太適合目前mvvm的編程模式。jQuery自己比較大，若是單純的使用ajax能夠本身封裝一個，否則會影響性能體驗。

 axios解析

axios({
method: 'post',
url: '',
data: {}
})
.then(function (data) {
console.log(data);
}
特色：

從瀏覽器中創XMLHttpRequest請求。

node.js中建立http請求。

自動轉換爲json數據類型

支持promise API ，提供了一些併發請求的接口。

是vue全家桶技術之一，在vue中須要使用npm install axios --save-dev來安裝依賴。

fetch解析

try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
特色

脫離了xhr。

是es規範裏新的實現方式。

更加底層，提供了豐富的API。

.fetch沒有辦法原生監測請求的進度，而XHR能夠。

 總結
ajax是最先出現發送後端請求的技術，屬於原生js範疇,核心是使用XMLHttpRequest對象,使用較多並有前後順序的話，容易產生回調地獄。

fetch號稱能夠代替ajax的技術，是基於es6中的Promise對象設計的，參數和jQuery中的ajax相似，它並非對ajax進一步封裝，它屬於原生js範疇。沒有使用XMLHttpRequest對象。

axios不是原生js,使用時須要對其進行安裝，客戶端和服務器端均可以使用，能夠在請求和相應階段進行攔截，基於promise對象。