Javascript链接承诺_Javascript_Ajax_Promise_Chained

Javascript链接承诺

javascript ajax

Javascript链接承诺,javascript,ajax,promise,chained,Javascript,Ajax,Promise,Chained,我在演示代码中用setTimeout函数模拟了3个ajax调用。我将从一段运行良好的代码开始：所有调用都是并行进行的，我希望所有调用都能成功，否则会出现错误 var p1 = function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log('p1'); resolve(1);

我在演示代码中用setTimeout函数模拟了3个ajax调用。我将从一段运行良好的代码开始：所有调用都是并行进行的，我希望所有调用都能成功，否则会出现错误

var p1 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p1');
            resolve(1);
            //reject(1);
        }, 2000);
    });
};

var p2 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p2');
            resolve(2);
            //reject(2);
        }, 1000);
    });
};

var p3 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p3');
            resolve(3);
            //reject(3);
        }, 5000);
    });
};

Promise.all([p1(), p2(), p3()])
.then(values => {
    console.log(values);
}).catch(values => {
    console.log("error: " + values);
});

现在，需要做的重要改变是，p2必须仅在p1成功结束后执行，而不是在其他情况下执行。这是新的代码，但这个代码并不适用：

var p1 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p1');
            resolve(1);
            //reject(1);
        }, 2000);
    });
};

var p2 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p2');
            resolve(2);
            //reject(2);
        }, 1000);
    });
};

var p21 = function() {
    return new Promise(function (resolve, reject) {
        p1().then(function (data) { p2(); })
    });
};

var p3 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p3');
            resolve(3);
            //reject(3);
        }, 5000);
    });
};

Promise.all([p21(), p3()])
.then(values => {
    console.log(values);
}).catch(values => {
    console.log("error: " + values);
});

我已经阅读了关于如何处理JS承诺的各种教程，但我仍然无法纠正我的问题

请注意，测试函数中使用的时间延迟只是一个示例，代码应该与函数的相对持续时间无关（即，每个函数是慢还是快）。

您可以通过在前一个promise的next（）函数中返回下一个promise调用来同步承诺。听起来很复杂，但很简单：

/*
* Remains the very same
*/

var p1 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p1');
            resolve(1);
            //reject(1);
        }, 2000);
    });
};

var p2 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p2');
            resolve(2);
            //reject(2);
        }, 1000);
    });
};

var p3 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p3');
            resolve(3);
            //reject(3);
        }, 5000);
    });
};

// If you want to run p1 and p3 in "parallel" + after p1 is finished run p2
Promise.all([p1().then(valuesFromP1 => {
    return p2();
}), p3()]).then(values => {
    // all 3 finished
})


// Or alternatively something similar but slightly different - see the comments
Promise.all([p1().then(valuesFromP1 => {
         // handle p1 is done
         p2().then(valuesFromP2 => {
            // handle p2 is done
         });
     }), p3()])
     .then(values => {
         // handle p1 and p3 are done but you don't care about p2
     });


// Or if you don't care about common finish you can simply do this
p1().then(valuesFromP1 => {
     // handle p1 is done
     p2().then(valuesFromP2 => {
        // handle p2 is done
     });
});
p3().then(valuesFromP3 => {
     // handle p3 is done
});

Frank

通过在previous promise的next（）函数中返回下一个promise调用，可以使承诺同步。听起来很复杂，但很简单：

/*
* Remains the very same
*/

var p1 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p1');
            resolve(1);
            //reject(1);
        }, 2000);
    });
};

var p2 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p2');
            resolve(2);
            //reject(2);
        }, 1000);
    });
};

var p3 = function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('p3');
            resolve(3);
            //reject(3);
        }, 5000);
    });
};

// If you want to run p1 and p3 in "parallel" + after p1 is finished run p2
Promise.all([p1().then(valuesFromP1 => {
    return p2();
}), p3()]).then(values => {
    // all 3 finished
})


// Or alternatively something similar but slightly different - see the comments
Promise.all([p1().then(valuesFromP1 => {
         // handle p1 is done
         p2().then(valuesFromP2 => {
            // handle p2 is done
         });
     }), p3()])
     .then(values => {
         // handle p1 and p3 are done but you don't care about p2
     });


// Or if you don't care about common finish you can simply do this
p1().then(valuesFromP1 => {
     // handle p1 is done
     p2().then(valuesFromP2 => {
        // handle p2 is done
     });
});
p3().then(valuesFromP3 => {
     // handle p3 is done
});

Frank

我相信您的第二个代码集缺少的是返回结果。不仅你的内心承诺不会“返回p2”，而且你没有使用你正在生成的解析/拒绝函数。首先，我会避免创建新的Promise对象作为解析其他对象的一种方式——通常，这可以通过更好地理解Promise库来实现（使用

然后

或

全部

）

然后

或

全部

）

我已经打了一些错字，但我希望它仍然可以理解。因此，将p21修改为：p1（）。然后（函数（数据）{return p2（）；}）。这将使p2从p1而不是p21链上断开。

var p21=（）=>p1（）。然后（p2）

就是您所需要的。我做了一些拼写错误，但我希望它仍然可以理解。请看这里：看一看。因此，将p21修改为：p1（）。然后（函数（数据）{return p2（）；}）。这将使p2从p1而不是p21链上断开。

var p21=（）=>p1（）。然后（p2）