我們來談談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起來吧