解决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谁先执行成功，则先返回谁的结果；而另外一个将丢弃
})