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規範,它本身具有以下特...