解决ajax回调地狱等问题——promise

2024年2月17日 294次阅读 来源: 刘宗瑞

在写前端异步请求的时候，我们可能碰到过这种情况：在执行完异步请求后，可能又需要在成功回调之后再次执行异步请求，例如：

$.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谁先执行成功，则先返回谁的结果；而另一个将丢弃
})
    原文作者：刘宗瑞
    原文地址: https://segmentfault.com/a/1190000019840868
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞