ajax和axios fetch的區別

2021-09-24 10:31:57 字數 1791 閱讀 9182

1.jquery ajax

$.ajax(,

error: function () {}

});

2.axios

axios(

}).then(function (response) )

.catch(function (error) );

vue2.0之後,尤雨溪推薦大家用axios替換jquery ajax,想必讓axios進入了很多人的目光中。

axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端,本質上也是對原生xhr的封裝,只不過它是promise的實現版本,符合最新的es規範,它本身具有以下特徵:

1.從瀏覽器中建立 xmlhttprequest

2.支援 promise api

3.客戶端支援防止csrf

4.提供了一些併發請求的介面(重要,方便了很多的操作)

5.從 node.js 建立 http 請求

6.攔截請求和響應

7.轉換請求和響應資料

8.取消請求

9.自動轉換json資料

ps:防止csrf:就是讓你的每個請求都帶乙個從cookie中拿到的key, 根據瀏覽器同源策略,假冒的**是拿不到你cookie中得key的,這樣,後台就可以輕鬆辨別出這個請求是否是使用者在假冒**上的誤導輸入,從而採取正確的策略。

3.fetch

try  catch(e)
fetch號稱是ajax的替代品,是在es6出現的,使用了es6中的promise物件。fetch是基於promise設計的。fetch的**結構比起ajax簡單多了,引數有點像jquery ajax。但是,一定記住fetch不是ajax的進一步封裝,而是原生js,沒有使用xmlhttprequest物件。

fetch的優點:

1.符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在乙個物件裡

2.更好更方便的寫法

坦白說,上面的理由對我來說完全沒有什麼說服力,因為不管是jquery還是axios都已經幫我們把xhr封裝的足夠好,使用起來也足夠方便,為什麼我們還要花費大力氣去學習fetch?

我認為fetch的優勢主要優勢就是:

1.  語法簡潔,更加語義化

2. 基於標準 promise 實現,支援 async/await

3. 同構方便,使用 [isomorphic-fetch](

4.更加底層,提供的api豐富(request, response)

5.脫離了xhr,是es規範裡新的實現方式

最近在使用fetch的時候,也遇到了不少的問題:

fetch是乙個低層次的api,你可以把它考慮成原生的xhr,所以使用起來並不是那麼舒服,需要進行封裝。

例如:

1)fetch只對網路請求報錯,對400,500都當做成功的請求,伺服器返回 400,500 錯誤碼時並不會 reject,只有網路錯誤這些導致請求不能完成時,fetch 才會被 reject。

2)fetch預設不會帶cookie,需要新增配置項: fetch(url, )

3)fetch不支援abort,不支援超時控制,使用settimeout及promise.reject的實現的超時控制並不能阻止請求過程繼續在後台執行,造成了流量的浪費

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

總結:axios既提供了併發的封裝,也沒有fetch的各種問題,而且體積也較小,當之無愧現在最應該選用的請求的方式。

ajax和axios fetch的區別

axios then function response catch function error vue2.0之後,尤雨溪推薦大家用axios替換jquery ajax,想必讓axios進入了很多人的目光中。axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端,本...

ajax和axios fetch的區別

最早出現的傳送後端請求技術,隸屬於原始js中。優點無需多言 缺點如下 ajax error function 1.本身是針對mvc的程式設計,不符合現在前端mvvm的浪潮 2.基於原生的xhr開發,xhr本身的架構不清晰。3.jquery整個專案太大,單純使用ajax卻要引入整個jquery非常的不...

ajax和axios fetch的區別

vue2.0之後,尤雨溪推薦大家用axios替換jquery ajax,想必讓axios進入了很多人的目光中。axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端,本質上也是對原生xhr的封裝,只不過它是promise的實現版本,符合最新的es規範,它本身具有以下特...