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

時間 2019-11-12

標籤 ajax axios fetch 三種請求區別欄目 Ajax 简体版

原文原文鏈接

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

原生XHR
jquery中的$.ajax()
axios
fetch

至於原生的XHR目前工做中已經不多去手寫它了，前些年咱們比較經常使用的是jquery的ajax請求，可是近些年前端發展很快，jquery包裝的ajax已經失去了往日的光輝，取而代之的是新出現的axios和fetch，二者都開始搶佔「請求」這個前端重要領域。本文結合本身的使用經歷總結一下它們之間的一些區別，並給出一些本身的理解。css

1.Jquery ajax

代碼示例：html

$.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請求示例：vue

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>使用jQuery-AJAX--讀取得到跨域JSONP數據</title>
 <script src="./jquery-1.7.2.js" type="text/javascript"></script>
 <style type="text/css">
 body,html{font-family: "Microsoft Yahei";}
 a{text-decoration: none;}
 </style>
</head>
<body>
<h2><a href="javascript:void(0)" class="btnAJAX">點擊AJAX獲取數據JSONP跨域....</a></h2>
<script src="jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
 $(".btnAJAX").click(function(){
 $.ajax({
 type : "get",
 async:false,
 url : "http://weather.123.duba.net/static/weather_info/101121301.html",
 dataType : "jsonp",
 jsonp: "", //服務端用於接收callback調用的function名的參數
 jsonpCallback:"weather_callback", //callback的function名稱
 success : function(json){
 console.log(json); //瀏覽器調試的時候用
 },
 error:function(){
 alert('fail');
 }
 });
 });
 });
</script>
</body>
</html>

效果以下：java

當點擊以上文字時，查看xhr請求，發現並無發出xhr請求node

再查看js請求，發現js發出了一個請求，所以jsonp本質是js請求而並不是xhr 請求，只是$.ajax把jsonp請求封裝到了ajax裏面而已。react

其實jquery ajax使用起來已是很方便了，那爲何如今還會被慢慢拋棄呢？我的認爲主要緣由有如下幾點：jquery

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

總結ios

隨着前端基於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」（透明）的緣由。

總結

Fetch仍是一個新時代的半成品，不少地方並不完善，可是也有它的優點所在，總的來講，就是Fetch技術還須要時間的沉澱，目前尚未達到axios的性能。

4.大總結

若是你是直接拉到底部的，就只要記住這個結論就能夠啦，目前只須要熟練使用Axios就能夠啦，Jquery的ajax會逐漸被時代淘汰，Fetch雖然符合前端潮流，可是目前還尚不成熟，沒有Axios使用起來便利。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。