Promise与函数嵌套的对比

举个常见的例子，一个验证问题，通过本地cookie中的uid，从服务器A获取一个key，然后从服务器B获取token，最终拿到这个token去服务器C获取用户的信息

这儿有三个api接口，分别是

01.//获取key接口
02.var apiKey= 'http://a.api.example.com/getkey?uid={uid}'
03.//获取token
04.var apiToken = 'http://b.api.example.com/gettoken?key={key}'
05.//获取用户信息
06.var apiUserInfo = 'http://a.api.example.com/getuserinfo?token={token}&uid={uid}'
07.
08.var uid = 1;
09.//代码可能就是这样
10.$.getJSON(apiKey,{
11. 'uid':uid
12.},function(data) {
13. $.getJSON(apiToken,{
14. 'key':data.key
15. },function(data){
16. $.getJSON(apiUserInfo,{
17. 'token':data.token,
18. 'uid':uid
19. },function(user) {
20. alert(user.name)
21. })
22. })
23.});


这代码一层套一层完全没法看，完全没有语意效果，后期维护起来头大呀

假设我们能这样写代码就好了

01.$.getJSON(apiKey,{
02. 'uid':uid
03.}).then(function(data){
04. return $.getJSON(apiToken,{
05. 'key':data.key
06. });
07.}).then(function(data){
08. return $.getJSON(apiUserInfo,{
09. 'token':data.token,
10. 'uid':uid
11. })
12.}).then(function(user) {
13. alert(user.name)
14.}) 

一步一步下来，调理非常清晰

所以我们要有代码来支持这种写法，当然啦有大神已经写好了，下面我们来看看

01.new Promise(function(resolve,reject){
02. $.getJSON(apiKey,{
03. 'uid':uid
04. },function(data) {
05. resolve(data);
06. },function(err){
07. reject(err);
08. })
09.}).then(function(data) {
10. new Promise(function(resolve,reject) {
11. $.getJSON(apiToken,{
12. 'key':data.key
13. },function(data){
14. resolve(data)
15. })
16. })
17.}).then(xxxxx) 

看起来还不错噢，以后我们写一个带回调的函数，就可以通过new Promise的方式


当然啦，jQuery已经实现了自己的方式.done 但是这玩意已经被大家摒弃了，

不过这玩意太不符合promise规则，所以，弃置


专业的promise专门给jQuery出了解决方案

比如这个

https://www.promisejs.org/


这里有一个实现，还是不错的，github上的关注最多

而且他专门给jQuery 提供了一个解决方案

//获取key接口var apiKey= 'http://a.api.example.com/getkey?uid={uid}'//获取tokenvar 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)

[javascript]view plain copy print?

1. Promise.resolve($.getJSON(apiKey,{  
2.     'uid':uid  
3. })).then(function(data) {  
4.     return Promise.resolve($.getJSON(apiToken,{  
5.         'key':data.key  
6.     }))  
7. }).then(function(data) {  
8.     return Promise.resolve($.getJSON(apiUserInfo,{  
9.         'token':data.token,  
10.         'uid':uid  
11.     }));  
12. }).then(function(user) {  
13.     alert(user.name);  
14. });