我们来谈谈promise，讨论一下如何优雅的避免多层回调嵌套的问题

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

我们来谈谈promise，讨论一下如何优雅的避免多层回调嵌套的问题

猜你喜欢