JavaScript中promise嵌套问题如何解决？

Question

比如：

var p1 = new Promise(function() {});
var p2 = new Promise(function() {});
var p3 = new Promise(function() {});
// var p4...

p1.then(function(p1_data) {
    p2.then(function(p2_data) {
        // do something with p1_data
        p3.then(fuction(p3_data) {
        // do something with p2_data
            // p4...
        });
    });
});

这样的情况怎样解决啊？

Answer 1

promise链式调用哦

var p1 = new Promise(function() {});
var p2 = new Promise(function() {});
var p3 = new Promise(function() {});
// var p4...

p1.then(function(p1_data) {
  return p2;
}).then(function(p2_data){
  return p3;
}).then(function(p3_data){
  return p4;
}).then(function(p4_data){
  //final result
}).catch(function(error){
    //同一处理错误信息
});

Answer 2

这是要多个异步 做同步处理， 一楼不能把多个结果进行交互处理， 正确的写发可以参考 Promise.all(Array).Promise.all

Answer 3

如果用JQuery，可以用promise的when方法：

$.when(p1,p2,p3).done(function(p1_data, p2_data, p3_data){
    // handle...
});

参考：https://api.jquery.com/jquery.when/

Answer 4

用when, http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

Answer 5

我补充个demo

var p1 = function(param1){
    return new Promise((resolve,reject)=>{
        //code
        console.log('p1 running');
        param1 +='-p1';
        resolve(param1);
    });
};
var p2 = function(param2){
    return new Promise((resolve,reject)=>{
        //code
        console.log('p2 running');
        param2 += '-p2';
        resolve(param2);
        // reject('stop in p2');
    });
};
var p3 = function(param3){
    return new Promise((resolve,reject)=>{
        //code
        console.log('p3 running');
        param3 += '-p2';
        resolve(param3);
    });
};
var param = '<<<<<start';
p1(param).then((res1)=>{
    console.log(res1);
    return p2(res1);    
}).then((res2)=>{
    console.log(res2);
    return p3(res2);    
}).then((res3)=>{
    console.log(res3);
}).catch((error)=>{
    console.log(error);
});

这是chrome的实测输出