我们知道,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起来吧