ajax和axios fetch的區別

2022-07-26 06:24:13 字數 1896 閱讀 6076

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的區別

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

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非常的不...