$.ajax({
url: 'www.baidu.com/getInfo',
type: 'POST',
data: {
name: 'jack',
age: 18
},
dataType: 'json',
success: function(resp){
// callback
},
error: function(err){
// error code
} 
});

乍一看挺好沒啥問題，但是其實(shí)success回調(diào)里的邏輯可能很復(fù)雜，甚至可能會出現(xiàn)ajax回調(diào)里再放一個ajax的情況，那這種寫法就很糟糕了，全都雜糅在一起

可以進(jìn)行一個簡單的封裝，這在之前Deferred對象的隨筆里已經(jīng)有提到

function ajax(url, param, type) {
// 利用了jquery延遲對象回調(diào)的方式對ajax封裝，使用done()，fail()，always()等方法進(jìn)行鏈?zhǔn)交卣{(diào)操作
// 如果需要的參數(shù)更多，比如有跨域dataType需要設(shè)置為'jsonp'等等，可以考慮參數(shù)設(shè)置為對象
return $.ajax({
url: url,
data: param || {},
type: type || 'GET'
});
}
// 鏈?zhǔn)交卣{(diào)
ajax('www.baidu.com/getInfo').done(function(resp) {
// 成功回調(diào)
}).fail(function(err) {
// 失敗回調(diào)
});

但是雖然做到這一步了，問題還是會來，比如我司，成功的回調(diào)里還有一層邏輯判斷，像這樣:

// 我司ajax返回的json數(shù)據(jù)格式
// 當(dāng)result為false時，msg中往往有錯誤信息
{
result: true,
data: {
name: 'jack'
},
msg: null
}
ajax('www.baidu.com/getInfo').done(function(resp) {
// 成功回調(diào)
if(resp.result){
// 當(dāng)resp中result為true時的操作
// 往往這個時候要操作處理resp中的data對象信息
}
else{
// 當(dāng)result為false時的操作，這時往往會根據(jù)resp中的另一屬性msg來判斷具體處理
}
}).fail(function(err) {
// 失敗回調(diào)
});

問題有二：

第一，我每個ajax中都需要寫一個同樣的相對固定的邏輯判斷（每個公司或者項目組可能會有不同，但是就項目本身而言，或者放大了到公司來說必然是固定的），我覺得很煩。

第二，如果我只想專注處理數(shù)據(jù)，比如在成功回調(diào)里，我直接拿到要處理要渲染的數(shù)據(jù)，在失敗的回調(diào)里我直接拿到錯誤的代碼，有沒有這樣的可能做進(jìn)一步的封裝。

其實(shí)這倆問題是一個，總結(jié)一句話，就是不想寫那么多if，else。有一句話我覺得說得很好，邏輯是守恒的，但如果是可預(yù)見的邏輯，是有精簡的可能的，我們這種顯然屬于可預(yù)見的邏輯。

二次封裝利用了延遲對象的then方法，具體看代碼：

function handleAjax(url, param, type) {
return ajax(url, param, type).then(function(resp){
// 成功回調(diào)
if(resp.result){
return resp.data; // 直接返回要處理的數(shù)據(jù)，作為默認(rèn)參數(shù)傳入之后done()方法的回調(diào)
}
else{
return $.Deferred().reject(resp.msg); // 返回一個失敗狀態(tài)的deferred對象，把錯誤代碼作為默認(rèn)參數(shù)傳入之后fail()方法的回調(diào)
}
}, function(err){
// 失敗回調(diào)
console.log(err.status); // 打印狀態(tài)碼
});
}
handleAjax('www.baidu.com/getInfo').done(function(resp){
// 當(dāng)result為true的回調(diào)
}).fail(function(err){
// 當(dāng)result為false的回調(diào)
});

這就把之前很雜揉的代碼進(jìn)一步的的簡化，也方便了維護(hù)，比如某一天跟你說result不再是布爾值了，直接改成狀態(tài)碼這樣的東西了，如果按以前一個ajax寫一個判斷，簡直要瘋。

以上所述是小編給大家介紹的基于jQuery的ajax方法封裝，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: