解決ajax回調地獄等問題——promise

在寫前端異步請求的時候，咱們可能碰到過這種狀況：在執行完異步請求後，可能又須要在成功回調以後再次執行異步請求，例如：

$.ajax({
    type:"post",
    success: function(){//成功回調
        //再次異步請求
        $.ajax({
            type:"post",
            url:"...",
            success:function(){
                .......//如此循環
            }
        })
    }
})

這就是回調地獄，這樣的代碼既很差維護，也不能複用。
另外還有一種狀況：有一個變量在另外一個方法使用他以前須要異步請求而且改變他的值，例如：

var a = 1
f1()
f2()///輸出1

function f1() {
    $.ajax({
        type:"post",
        url:"...",
        success:function(){
            a = 2;
        }
    })
}

function f2() {
    console.log(a)///指望輸出2
}

固然，咱們能夠把請求改爲同步來解決這個問題。
以上的兩種問題的狀況，咱們均可以用promise來解決；先看一下promise的用法：
var p1 = new Promise(f1);
var p2 = p1.then(function (result) {

///f1執行成功的回調

});
var p3 = p2.catch(function (reason) {

///f1執行失敗的回調

});
也能夠簡寫爲：

new Promise(f1).then(function (result) {
    ///f1執行成功的回調
}).catch(function (reason) {
    ///f1執行失敗的回調
});

promise會在f1異步請求執行完成後，才繼續執行。這樣的好處就是若是有多個異步請求，須要先執行f1，成功後再執行f2，若是其中有任何任務失敗則再也不繼續並執行錯誤處理函數，這樣就不用去寫嵌套的異步請求了。同時把執行代碼和處理結果的代碼清晰地分離。因此promise能夠一下解決上面兩個問題：

var p = new Promise(f1)
 .then(f2)
 .then(f3)
 .then(f4)
 .then(f5)
 .then(f5)

另外，除了串行執行異步任務外，Promise還能夠並行執行異步任務：使用promise.all()

Promise.all([f1, f2]).then(function (results) {
    console.log(results); // 得到一個Array
})

咱們還可使用Promise.race()來作容錯處理、

Promise.race([f1, f2]).then(function (result) {
    console.log(result); //f1和f2誰先執行成功，則先返回誰的結果；而另外一個將丟棄
})