ajax,axios,fetch

$.ajax,axios,fetch三種ajax請求的區別

Ajax是常用的一門與Web伺服器通訊的技術，目前傳送Ajax請求的主要有4種方式：

原生XHR
jquery中的$.ajax()
axios
fetch
至於原生的XHR目前工作中已經很少去手寫它了，前些年我們比較常用的是jquery的ajax請求，但是近些年前端發展很快，jquery包裝的ajax已經失去了往日的光輝，取而代之的是新出現的axios和fetch，兩者都開始搶佔“請求”這個前端重要領域。本文結合自己的使用經歷總結一下它們之間的一些區別，並給出一些自己的理解。

1.Jquery ajax
程式碼示例：

$.ajax({
type:“GET”,
url:url,
data:data,
dataType:dataType
success:function(){},
error:function(){}
})
以上程式碼很簡單，我就不多解釋了，這就是jquery對原生XHR的封裝，另外還增加了jsonp的支援，讓ajax請求可以支援跨域請求，但是要注意的是：jsonp請求本質不是XHR非同步請求，就是請求了一個js檔案，因此在瀏覽器的network皮膚中的xhr標籤下看不到jsonp的跨域請求，但是在js標籤下能看見。

jsonp請求示例：

效果如下：

$.ajax,axios,fetch三種ajax請求的區別
當點選以上文字時，檢視xhr請求，發現並沒有發出xhr請求

$.ajax,axios,fetch三種ajax請求的區別再查看js請求，發現js發出了一個請求，因此jsonp本質是js請求而並非xhr請求，只是$.ajax把jsonp請求封裝到了ajax裡面而已。

$.ajax,axios,fetch三種ajax請求的區別
其實jquery ajax使用起來已經是很方便了，那為什麼現在還會被慢慢拋棄呢？個人認為主要原因有以下幾點：

要使用jquery ajax必須引入jquery整個大檔案，不是很划算
jquery ajax本身是針對MVC設計模式的程式設計，與當前流行的基於MVVM模式的vue、react等框架不符合
jquery ajax本質是基於XHR的封裝，而XHR本身架構不是很清晰，目前已採用fetch代替方案
總結

隨著前端基於MVVM模式的Vue和React新一代框架的興起，以及ES6等新規範的制定，像Jquery這種大而全的JS庫註定是要走向低潮的。

2.Axios
程式碼示例：

axios({
method: ‘post’,
url: ‘/login’,
data: {
username:‘martin’,
password:‘a1234567’
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
這種ajax請求方式是Vue框架的作者尤雨溪開始推薦使用的。其實Axios的本質也是基於原生XHR的封裝，只不過它是基於ES6的新語法Promise的實現版本。並且具有以下幾條特性：

從瀏覽器中建立XHR
從node.js中建立http請求
支援promise API
提供了併發請求的介面（重要，方便操作）
支援攔截請求和響應
支援取消請求
客戶端支援防禦CSRF攻擊
總結

Axios除了和jquery ajax一樣封裝了原生的XHR，還提供了很多比如：併發請求、攔截等多種介面，同時它的體積還比較小，也沒有下文fetch的各種問題，可以說是目前最佳的ajax請求方式了。

3.Fetch
程式碼示例：

try{
var response=await fetch(url);
var data=response.json();
console.log(data);
}catch(e){
console.log(‘error is’+e);
}
上面說的$.ajax和Axios說到底本質都是對原生XHR的封裝，但是Fetch可以說是新時代XHR的替代品。它的特性如下：

更加底層，提供更豐富的API
不基於XHR，是ES新規範的實現方式
但是目前Fetch還存在很多問題

1）fetch只對網路請求報錯，對400，500都當做成功的請求

2）fetch預設不會帶cookie，需要新增配置項

3）fetch沒有辦法原生監測請求的進度，而XHR可以

Fetch在使用上說實話目前還沒有axios和jquery ajax方便,因此我個人在工作中也是使用axios的比較多。說到這裡，你可能覺得Fetch就是強行用ES新規範做出來的代替XHR的半成品，事實上我就是這麼認為的。但是有一點Fetch做的效能要遠比XHR要好，那就是“跨域的處理”。

因為同源策略的約束，瀏覽器傳送的請求是不能隨便跨域的，一定要藉助JSONP或者跨域頭來協助跨域，而Fetch可以直接設定mode為“no-cors”來實現跨域訪問，如下所示

fetch(’/login.json’, {
method: ‘post’,
mode: ‘cors’,
data: {name:martin’’}
}).then(function() { /* handle response */ });
我們會得到一個type為“opaque”（透明）的response。這個請求是真正抵達過後臺的，但是瀏覽器不可以訪問返回的內容，這也就是為什麼response中的type為“opaque”（透明）的原因。

$.ajax,axios,fetch三種ajax請求的區別
總結

Fetch還是一個新時代的半成品，很多地方並不完善，但是也有它的優勢所在，總的來說，就是Fetch技術還需要時間的沉澱，目前還沒有達到axios的效能。
轉自：https://www.cnblogs.com/dqq313/p/11654271.html