1.jQuery ajaxjavascript
$.ajax({
type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} });
傳統 Ajax 指的是 XMLHttpRequest(XHR), 最先出現的發送後端請求技術,隸屬於原始js中,核心使用XMLHttpRequest對象,多個請求之間若是有前後關係的話,就會出現回調地獄。
JQuery ajax 是對原生XHR的封裝,除此之外還增添了對JSONP的支持。缺點以下:
1.自己是針對MVC的編程,不符合如今前端MVVM的浪潮
2.基於原生的XHR開發,XHR自己的架構不清晰。
3.JQuery整個項目太大,單純使用ajax卻要引入整個JQuery很是的不合理(採起個性化打包的方案又不能享受CDN服務)
4.不符合關注分離(Separation of Concerns)的原則
5.配置和調用方式很是混亂,並且基於事件的異步模型不友好css
2.axios前端
axios({
method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(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.fetchjava
try { let response = await fetch(url); let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); }
fetch號稱是AJAX的替代品,是在ES6出現的,使用了ES6中的promise對象。Fetch是基於promise設計的。Fetch的代碼結構比起ajax簡單多了,參數有點像jQuery ajax。可是,必定記住fetch不是ajax的進一步封裝,而是原生js,沒有使用XMLHttpRequest對象。
fetch的優勢:
1.符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏
2.更好更方便的寫法
坦白說,上面的理由對我來講徹底沒有什麼說服力,由於不論是Jquery仍是Axios都已經幫咱們把xhr封裝的足夠好,使用起來也足夠方便,爲何咱們還要花費大力氣去學習fetch?
我認爲fetch的優點主要優點就是:node
1. 語法簡潔,更加語義化 2. 基於標準 Promise 實現,支持 async/await 3. 同構方便,使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) 4.更加底層,提供的API豐富(request, response) 5.脫離了XHR,是ES規範裏新的實現方式
最近在使用fetch的時候,也遇到了很多的問題:
fetch是一個低層次的API,你能夠把它考慮成原生的XHR,因此使用起來並非那麼舒服,須要進行封裝。
例如:ios
1)fetch只對網絡請求報錯,對400,500都當作成功的請求,服務器返回 400,500 錯誤碼時並不會 reject,只有網絡錯誤這些致使請求不能完成時,fetch 纔會被 reject。 2)fetch默認不會帶cookie,須要添加配置項: fetch(url, {credentials: 'include'}) 3)fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行,形成了流量的浪費 4)fetch沒有辦法原生監測請求的進度,而XHR能夠
總結:axios既提供了併發的封裝,也沒有fetch的各類問題,並且體積也較小,當之無愧如今最應該選用的請求的方式。git