jQuery ajax1

2

3

4

5

6

7

8$.ajax({

type: 'POST',

url: url,

data: data,

dataType: dataType,

success: function (){},

error: function (){}

})

優缺點：

本身是針對mvc模式的編程，不符合現在mvvm的浪潮

基于原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案

JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理(采取個性化打包的方案又不能享受CDN服務)

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

axios1

2

3

4

5

6

7

8

9

10

11axios({

method: 'POST',

url: ''

data:{

name:'zhang'

}

}).then(function (response){

console.log(response)

}).then(function (error){

console.log(error)

})

Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax，想必讓Axios進入了很多人的目光中。Axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，從它的官網上可以看到它有以下幾條特性：

優缺點：

從 node.js 創建 http 請求

支持 Promise API

客戶端支持防止CSRF

提供了一些并發請求的接口(重要，方便了很多的操作)

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

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

fetch

fetch號稱是AJAX的替代品，它的好處在《傳統 Ajax 已死，Fetch 永生》中提到有以下幾點：

符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象里

更好更方便的寫法，諸如：

1

2

3

4

5

6

7try{

let response = await fetch(url);

let data = response.json();

console.log(data);

}catch (e){

console.log("Oops, error", e);

}

脫離了XHR，是ES規范里新的實現方式

1)fetchtch只對網絡請求報錯，對400，500都當做成功的請求，需要封裝去處理

2)fetch默認不會帶cookie，需要添加配置項

3)fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制并不能阻止請求過程繼續在后臺運行，造成了量的浪費

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

看到這里，你心里一定有個疑問，這鬼東西就是個半拉子工程嘛，我還是回去用Jquery或者Axios算了——其實我就是這么打算的。但是，必須要提出的是，我發現fetch在前端的應用上有一項xhr怎么也比不上的能力：跨域的處理。

我們都知道因為同源策略的問題，瀏覽器的請求是可能隨便跨域的——一定要有跨域頭或者借助JSONP，但是，fetch中可以設置mode為no-cors(不跨域)，如下所示：

1

2

3

4

5fetch('/users.json', {

method: 'post',

mode: 'no-cors',

data: {}

}).then(function(){ /* handle response */ });

為什么要用axios

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

從瀏覽器中創建 XMLHttpRequest

從 node.js 發出 http 請求

支持 Promise API

攔截請求和響應

轉換請求和響應數據

取消請求

自動轉換JSON數據

客戶端支持防止CSRF/XSRF

總結

以上是生活随笔為你收集整理的ajax速度axio速度,[转]Ajax Fetch Axios之间的详细区别以及优缺点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。