我们知道,javascript是没办法阻塞的,所有的等待只能通过回调来完成,这就造成了,回调嵌套的问题,导致代码乱到爆
举个常见的例子,一个验证问题,通过本地cookie中的uid,从服务器A获取一个key,然后从服务器B获取token,最终拿到这个token去服务器C获取用户的信息
这儿有三个api接口,分别是
//获取key接口
var apiKey= 'http://a.api.example.com/getkey?uid={uid}'
//获取token
var apiToken = 'http://b.api.example.com/gettoken?key={key}'
//获取用户信息
var apiUserInfo = 'http://a.api.example.com/getuserinfo?token={token}&uid={uid}'
var uid = 1;
//代码可能就是这样
$.getJSON(apiKey,{
'uid':uid
},function(data) {
$.getJSON(apiToken,{
'key':data.key
},function(data){
$.getJSON(apiUserInfo,{
'token':data.token,
'uid':uid
},function(user) {
alert(user.name)
})
})
});
这代码一层套一层完全没法看,完全没有语意效果,后期维护起来头大呀
假设我们能这样写代码就好了
$.getJSON(apiKey,{
'uid':uid
}).then(function(data){
return $.getJSON(apiToken,{
'key':data.key
});
}).then(function(data){
return $.getJSON(apiUserInfo,{
'token':data.token,
'uid':uid
})
}).then(function(user) {
alert(user.name)
})
所以我们要有代码来支持这种写法,当然啦有大神已经写好了,下面我们来看看
new Promise(function(resolve,reject){
$.getJSON(apiKey,{
'uid':uid
},function(data) {
resolve(data);
},function(err){
reject(err);
})
}).then(function(data) {
new Promise(function(resolve,reject) {
$.getJSON(apiToken,{
'key':data.key
},function(data){
resolve(data)
})
})
}).then(xxxxx)
看起来还不错噢,以后我们写一个带回调的函数,就可以通过new Promise的方式了
当然啦,jQuery已经实现了自己的方式.done 但是这玩意已经被大家摒弃了,
不过这玩意太不符合promise规则,所以,弃置
专业的promise专门给jQuery出了解决方案
比如这个
https://www.promisejs.org/
这里有一个实现,还是不错的,github上的关注最多
而且他专门给jQuery 提供了一个解决方案
Promise.resolve($.getJSON(apiKey,{
'uid':uid
})).then(function(data) {
return Promise.resolve($.getJSON(apiToken,{
'key':data.key
}))
}).then(function(data) {
return Promise.resolve($.getJSON(apiUserInfo,{
'token':data.token,
'uid':uid
}));
}).then(function(user) {
alert(user.name);
});
更爽了有么有
新技能,大家赶紧get起来吧