ES6探索 —— Promise對象

最近在接觸react-redux異步action的時候，有一個異步的寫法很是有意思。應用了Promise對象，很好解決了不優雅的金字塔結構代碼。
傳統的回調代碼一層套一層，當你想要寫一個異步請求，請求裏面又帶着請求的時候，該怎麼作呢。

沒有使用Promise對象的時候，代碼是這樣的：

$.getJSON(url,req,function(data,status){
    if(status == "success"){
        $.getJSON(url,data,function(data,status){
            if(status == "success"){
                $.getJSON(url,data,function(data,status){
                    if(status == "success"){
                        //.....
                    }else{
                        throw new Error("error")
                    }
                })
            }else{
                throw new Error("error");
            }
        })
    }else{
        throw new Error("error");
    }
})

再來幾回估計咱們會崩潰的，如今咱們用Promise的方法來寫一遍：

var promise = new Promise((resolve,reject) => {
    $.getJSON(url,data,function(data,status){
        if(status == "success"){
            resolve(data)
        }else{
            var error = new Error("error");
            reject(error)
                                                                                    
        }
    })
})
.then((data) => {
    return new Promise((resolve,reject) => {
        $.getJSON(url,data,function(data,status){
            if(status == "success"){
                resolve(data)
            }else{
                var error = new Error("error");
                reject(error)
                                                                                    
            }
        })
    })
},(error) => { throw error })
.then((data) => {
    return new Promise((resolve,reject) => {
        $.getJSON(url,data,function(data,status){
            if(status == "success"){
                resolve(data)
            }else{
                var error = new Error("error");
                reject(error)
                                                                                    
            }
        })
    })
},(error) => { throw error })

怎麼樣，是否是以爲每一步都清晰不少，尤爲是回調中的操做更多的時候，這種步驟感更加明顯。
新同窗確定會有些迷惑，接下我就一步一步的重現個人探索過程。給一樣在學習路上的大家提供一點幫助吧

首先咱們能夠嘗試寫一個最簡單的例子

var promise = new Promise((resolve,reject) => {
    var a = 1;
    if( a > 0 ){
       resolve(a);
    }else{
       reject(error);
    }
})

當咱們新建了一個promise實例的時候，裏面的function會當即執行
參數resolve表明該符合條件時觸發的觸發的函數。reject表示程序異常的處理函數。
接下來咱們就能夠經過.then來觸發下面的步驟。

promise.then(
    (data) => { console.log(data) },
    (error) => { console.log(error) }
)

由於咱們是符合條件的，因此咱們會看到輸出的結果是 1

固然咱們改造一下當前調用，能夠繼續執行下去。
上一個函數return 的值，就是咱們下面要調用函數的data；

promise.then(
    (data) => { 
        console.log(data)；
        return data+1;
    },
    (error) => { console.log(error) }
).then(
    (data) => {
        console.log(data);
    }
)

輸出結果是 1 2

這時候細心的同窗就會發現了，若是咱們拋出異常的話 輸出結果 就是一個error 和 undefined，這顯然不是咱們想要達到的效果。那麼怎麼讓他reject的時候中止執行下面的函數呢。
很簡單，只要把錯誤給拋出就能夠了。這樣的話就不會繼續執行下去了。

promise.then(
    (data) => { 
        console.log(data)；
        return data+1;
    },
    (error) => { throw error }
).then(
    (data) => {
        console.log(data);
    }
)

當promise裏面也是一個異步請求的時候，咱們只須要在最後返回一個新的Promise 實例，就能夠實現異步的順序執行。

promise.then(
    (data) => new Promise((resolve,reject) => {
        var b = 0;
        if(b<1){
            resolve(b);
        }else{
            reject(error);
        }
    }),
    (error) => { throw error }
).then(
    (data) => { console.log(data); },
    (error) => { throw error }
)

以上就實現了一個簡單的例子編寫啦，固然promise還有一些高級的用法,詳情請參考阮一峯老師的教程。 若是以上有什麼疏漏或者錯誤的地方，歡迎各位大神指正，謝謝你們。