ajax 回调地域,解决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谁先执行成功，则先返回谁的结果；而另一个将丢弃

})