jQuery 的請求管理

背景

伴隨着前端的交互的多樣化，先後端直接的數據往來的頻率也急速的膨脹起來。較多的請求不免給代碼的管理帶來麻煩。

使用jQuery作ajax請求，咱們會常常使用以下代碼:

$.ajax(url,{
    dataType:"jsonp",
    data:{},
    success: function(){}
})

多少的請求，就會產生多個類似的代碼片斷，長此以往，便雜亂無章。

改進

自從jQuery引入Promise機制，並重寫了$.ajax模塊以後，只須對代碼稍做調整，咱們就可以很是便利的管理各類請求。

例子

某個SPA頁面，可能以下一些請求:

$.ajax('http://www.xxx.com/getQuery?type=musicData')
$.ajax('http://www.xxx.com/getQuery?type=gameData')
$.ajax('http://www.xxx.com/getQuery?type=channelData')
$.ajax('http://www.xxx.com/getQuery?type=messageData')

分析得出只是查詢參數迥異，咱們可使用hash來管理請求參數。

// 參數管理
var dataUrl = {
    "muisc"   : "musicData",
    "game"    : "gameData",
    "channel" : "channelData",
    "message" : "messageData"
}

// 請求管理
var Req = {}

// 遍歷生成相應請求
$.each( dataUrl, function( k ,v ) {
    Req[k] = function( o ){ 
        // 返回`promise`對象
        return $.ajax('http://www.xxx.com/getQuery' + v,$.extend({},{dataType:"jsonp"},o))
    }
})

爲管理回調函數而生的Proimse對象，優越性在這個時候體現的淋漓盡致。咱們看看調用的狀況:

//請求 Music
Req.music({/* 其餘查詢參數 */ data: {} }).done(function(res){ /*請求結果*/ })

// 請求 Game
Req.game({/* 其餘查詢參數 */ data: {} }).done(function(res){ /*請求結果*/ })

其餘請求均可以如法炮製了。

能夠看到，全部的請求聲明都具有了良好的可讀性，管理起來也就是順手多了。若是項目使用了seajs等做依賴管理，大能夠把請求做爲一個模塊request.js來管理。