脚本宝典收集整理的这篇文章主要介绍了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
来管理。
以上是脚本宝典为你收集整理的jQuery 的请求管理全部内容,希望文章能够帮你解决jQuery 的请求管理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。