關(guān)于二次封裝jquery ajax辦法示例詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:51:37

關(guān)于二次封裝jquery ajax辦法示例詳解

關(guān)于二次封裝jquery ajax辦法示例詳解:前言 Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML AJax所涉及到得技術(shù)： 1.使用CSS和XHTML來表示。 2. 使用DOM模型來交互和動態(tài)顯示。 3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。(核心) 4.使用jav

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于二次封裝jquery ajax辦法示例詳解:前言 Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML AJax所涉及到得技術(shù)： 1.使用CSS和XHTML來表示。 2. 使用DOM模型來交互和動態(tài)顯示。 3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。(核心) 4.使用jav

前言

Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML

AJax所涉及到得技術(shù)：

1.使用CSS和XHTML來表示。

2. 使用DOM模型來交互和動態(tài)顯示。

3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。(核心)

4.使用javascript來綁定和調(diào)用。

在我們前端處理數(shù)據(jù)的時候免不了要 ajax 與后臺通信， ajax 是通過 XMLHttpRequest 對象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaquest 的基礎(chǔ)上封裝了 $.ajax 辦法進(jìn)行通信， $.ajax 辦法實用性非常強，又非常簡單易用。本次二次封裝 query ajax，參考 express 可以添加中間件處理數(shù)據(jù)，返回 Promise（Defferd）對象，減少回調(diào)，寫 ajax 更加簡潔、優(yōu)雅。

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

大部分的時候我們只需要傳入 url 和 data，就可以獲取到我們想到的數(shù)據(jù)了。

痛點

但是在項目中使用 $.ajax, 它還是有一些痛點的

就是現(xiàn)在基本所有項目的 ajax 返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺在處理業(yè)務(wù)邏輯時的信息。

從返回 data, 變成了 ｛code: 200, data:{}, err_msg:''｝

如果每一個 ajax 請求回來都要判斷 code 是否正確再進(jìn)行業(yè)務(wù)邏輯處理或者報錯提醒，整個項目下來也太冗余了，

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
 dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

為了解決這個問題，我們用一個函數(shù)再次封裝 $.ajax，把這種正確與否判斷再處理業(yè)務(wù)邏輯或者報錯提醒提取出來做成公共的部分。

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 使用就可以減少了業(yè)務(wù)錯誤的判斷啦。我們再來完善下，不使用回調(diào)的方式，使用 promise 的方式調(diào)用, 減少回調(diào)，讓代碼更清晰。

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)
 });
}


// 調(diào)用
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
 });
 });
}

// 調(diào)用
// 調(diào)用
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)
 })

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

關(guān)于二次封裝jquery ajax辦法示例詳解

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：封裝 ajax jQuery

熱門焦點

關(guān)于二次封裝jquery ajax辦法示例詳解

關(guān)于二次封裝jquery ajax辦法示例詳解

關(guān)于二次封裝jquery ajax辦法示例詳解

最新推薦

猜你喜歡

熱門推薦