在Web開發中，由于Ajax是本地刷新，因此后端的重定向是無效的，并且后端的權限控制需要Ajax頁面的同步才能生效，下面是錯新技術頻道小編詳解二次封裝jquery ajax的示例，一起進入下文了解一下吧！
前言
Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML
AJax所涉及到得技術：
?????? 1.使用CSS和XHTML來表示。
?????? 2. 使用DOM模型來交互和動態顯示。
?????? 3.使用XMLHttpRequest來和服務器進行異步通信。(核心)
?????? 4.使用javascript來綁定和調用。
在我們前端處理數據的時候免不了要 ajax 與后臺通信， ajax 是通過 XMLHttpRequest 對象與服務器進行通信的， jquery 在 XMLHttpReaquest 的基礎上封裝了 $.ajax 辦法進行通信， $.ajax 辦法實用性非常強，又非常簡單易用。 本次二次封裝 query ajax，參考 express 可以添加中間件處理數據，返回 Promise（Defferd） 對象，減少回調， 寫 ajax 更加簡潔、優雅。
$.ajax({ url: url, data: data, dataType: 'json', type: 'get', success: new Function(){}, error: new Function(){}, .......})大部分的時候我們只需要傳入 url 和 data， 就可以獲取到我們想到的數據了。
痛點
但是在項目中使用 $.ajax, 它還是有一些痛點的
就是現在基本所有項目的 ajax 返回的數據也是進行了二次封裝，加入了后臺在處理業務邏輯時的信息。
從返回 data, 變成 了 ｛code: 200, data:{}, err_msg:''｝
如果每一個 ajax 請求回來都要判斷 code 是否正確再進行業務邏輯處理或者報錯提醒， 整個項目下來也太冗余了，
$.ajax({ url: url, data: data, success: function(data){ if(data.code == 200) { dosomething() } else { alert(data.err_msg); } }})為了解決這個問題，我們用一個函數再次封裝 $.ajax， 把這種正確與否判斷再處理業務邏輯或者報錯提醒提取出來做成公共的部分。
util.ajax = function(obj, successFn){ $.ajax({ url: obj.url || '/interface', data: obj.data || {}, dataType: obj.dataType || 'json', type: obj.type || 'get', success: function(data){ if (data.code != 200) { alert(data.err_msg); } else { successFn(data.data) } }, error: function(err){ alert(err) } })}promise
用 util.ajax 代替 $.ajax 使用就可以減少了業務錯誤的判斷啦。 我們再來完善下， 不使用回調的方式，使用 promise 的方式調用, 減少回調，讓代碼更清晰。
util.ajax = function(obj) { var deferred = $.Deferred(); $.ajax({ url: obj.url || '/interface', data: obj.data || {}, dataType: obj.dataType || 'json', type: obj.type || 'get', }).success(function (data) { if (data.code != 200) { deferred.reject(data.err_msg); } else { deferred.resolve(data.data) } }).error(function (err) { deferred.reject('接口出錯，請重試'); }) return deferred.fail(function (err) { alert(err) });}// 調用var obj = { url: '/interface', data: { interface_name: 'name', interface_params: JSON.stringify({}) }};util.ajax(obj) .done(function(data){ dosomething(data) })中間件
這是一個公共的辦法，但是有時候我們需要處理差異化啊， 我們參考 express 引入一個中間件來解決差異化問題。
util.ajax = function(obj, middleware) { var deferred = $.Deferred(); $.ajax({ url: obj.url || '/interface', data: obj.data || {}, dataType: obj.dataType || 'json', type: obj.type || 'get', }).success(function (data) { if (data.code != 200) { deferred.reject(data.err_msg); } else { deferred.resolve(data.data) } }).error(function (err) { deferred.reject('接口出錯，請重試'); }) // 添加中間件 if(!middleware) { middleware = function(){}; } return deferred.done(middleware).fail(function (err) { message({ content: err, type: 'error', showLeftIcon: true, duration: 5000 }); });}// 調用// 調用var obj = { url: '/interface', data: { interface_name: 'name', interface_params: JSON.stringify({}) }};var middleware = function(data) { data.forEach(function(item){ item.fullName = item.firstName + item.lastName })}util.ajax(obj, middleware) .done(function(data){ console.log(data.fullName) })總結
以上是本文介紹的詳解二次封裝jquery ajax的示例內容，希望本文的內容能對大家的學習和工作有所幫助。如果您有任何問題，可以留言和交流。
新聞熱點
疑難解答
圖片精選
