前言
Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML
AJax所涉及到得技術(shù)：
1.使用CSS和XHTML來(lái)表示。
2. 使用DOM模型來(lái)交互和動(dòng)態(tài)顯示。
3.使用XMLHttpRequest來(lái)和服務(wù)器進(jìn)行異步通信。(核心)
4.使用javascript來(lái)綁定和調(diào)用。
在我們前端處理數(shù)據(jù)的時(shí)候免不了要 ajax 與后臺(tái)通信， ajax 是通過(guò) XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaquest 的基礎(chǔ)上封裝了 $.ajax 辦法進(jìn)行通信， $.ajax 辦法實(shí)用性非常強(qiáng)，又非常簡(jiǎn)單易用。 本次二次封裝 query ajax，參考 express 可以添加中間件處理數(shù)據(jù)，返回 Promise（Defferd） 對(duì)象，減少回調(diào)， 寫 ajax 更加簡(jiǎn)潔、優(yōu)雅。
$.ajax({
url: url,
data: data,
dataType: 'json',
type: 'get',
success: new Function(){},
error: new Function(){},
.......
})大部分的時(shí)候我們只需要傳入 url 和 data， 就可以獲取到我們想到的數(shù)據(jù)了。
痛點(diǎn)
但是在項(xiàng)目中使用 $.ajax, 它還是有一些痛點(diǎn)的
就是現(xiàn)在基本所有項(xiàng)目的 ajax 返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺(tái)在處理業(yè)務(wù)邏輯時(shí)的信息。
從返回 data, 變成 了 ｛code: 200, data:{}, err_msg:''｝
如果每一個(gè) ajax 請(qǐng)求回來(lái)都要判斷 code 是否正確再進(jìn)行業(yè)務(wù)邏輯處理或者報(bào)錯(cuò)提醒， 整個(gè)項(xiàng)目下來(lái)也太冗余了，
$.ajax({
url: url,
data: data,
success: function(data){
if(data.code == 200) {
dosomething()
} else {
alert(data.err_msg);
}
}
})為了解決這個(gè)問(wèn)題，我們用一個(gè)函數(shù)再次封裝 $.ajax， 把這種正確與否判斷再處理業(yè)務(wù)邏輯或者報(bào)錯(cuò)提醒提取出來(lái)做成公共的部分。
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ù)錯(cuò)誤的判斷啦。 我們?cè)賮?lái)完善下， 不使用回調(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('接口出錯(cuò)，請(qǐng)重試');
})
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)
})中間件
這是一個(gè)公共的辦法，但是有時(shí)候我們需要處理差異化啊， 我們參考 express 引入一個(gè)中間件來(lái)解決差異化問(wèn)題。
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('接口出錯(cuò)，請(qǐng)重試');
})
// 添加中間件
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)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
