jQuery 的请求管理

最新推荐文章于 2022-05-17 09:27:36 发布

原创最新推荐文章于 2022-05-17 09:27:36 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

背景

伴随着前端的交互的多样化，前后端直接的数据往来的频率也急速的膨胀起来。较多的请求难免给代码的管理带来麻烦。

使用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来管理。