如何在函数返回之前等待promise完成

Question

基本承诺问题：

 console.log('Promise START'); function makeFullJSON(time) { return new Promise((resolve, reject) => { setTimeout(resolve, time, [time]); }) } var p1 = makeFullJSON(1000); var p2 = makeFullJSON(500); var p3 = makeFullJSON(750); p1.then(array => { console.log('Promise 1 complete', array); }); p2.then(array => { console.log('Promise 2 complete', array); }); p3.then(array => { console.log('Promise 3 complete', array); }); Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => { console.log('Array of resolved values:', arrayOfAllResolvedValues); }); console.log('Promise END'); 

代码输出是：

Promise START
Promise END
Promise 2 complete [ 500 ]
Promise 3 complete [ 750 ]
Promise 1 complete [ 1000 ]
Array of resolved values: [ [ 1000 ], [ 500 ], [ 750 ] ]

你如何重写代码，输出是：

Promise START
Promise 2 complete [ 500 ]
Promise 3 complete [ 750 ]
Promise 1 complete [ 1000 ]
Array of resolved values: [ [ 1000 ], [ 500 ], [ 750 ] ]
Promise END

Answer 1

完成后您想要发生的任何事情都会转移到您传递给的箭头函数。

    console.log('Promise START');

    function makeFullJSON(time) {
       return new Promise((resolve, reject) => {
       setTimeout(resolve, time, [time]); 
    })}

    var p1 = makeFullJSON(1000);
    var p2 = makeFullJSON(500);
    var p3 = makeFullJSON(750);

    p1.then(array => {
        console.log('Promise 1 complete', array);});

    p2.then(array => {
        console.log('Promise 2 complete', array););

    p3.then(array => {
        console.log('Promise 3 complete', array);});

    Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
        console.log('Array of resolved values:', arrayOfAllResolvedValues);

        console.log('Promise END');
    });

为了放弃立即执行程序，并开始编写仅在所有3个promises解决之后才会发生的代码，因为它听起来你想要发生，那么我建议在代码下面直接创建一个新函数，以包含你想要的代码喜欢在解决后发生，并传递该函数，如： Promise.all([p1, p2, p3]).then(newFunctionName) 。 您可能更容易以这种方式对其进行可视化，至少在您习惯于思考它是如何精确工作之前。

Answer 2

首先修复语法错误。 然后将console.log移动到整个流程结束的位置：

 console.log('Promise START'); function makeFullJSON(time) { return new Promise((resolve, reject) => { setTimeout(resolve, time, [time]); })} var p1 = makeFullJSON(1000); var p2 = makeFullJSON(500); var p3 = makeFullJSON(750); p1.then(array => { console.log('Promise 1 complete', array);}); p2.then(array => { console.log('Promise 2 complete', array);}); // fixed syntax error here p3.then(array => { console.log('Promise 3 complete', array);}); Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => { console.log('Array of resolved values:', arrayOfAllResolvedValues); console.log('Promise END'); }); 

Answer 3

如果放置console.log('Promise END')的明显答案不会漂浮你的船，为什么不呢？

//didnt change anything at all above here
Promise.all([p1, p2, p3]).then(arrayOfAllResolvedValues => {
    console.log('Array of resolved values:', arrayOfAllResolvedValues);
}).then(() => {
    console.log('Promise END');
});

如果要在完成所有promise之后对操作进行排序， then()必须按照打印数组值时的then()进行排序

Answer 4

使用async / await ：

 (async () => { console.log('Promise START'); function makeFullJSON(time) { return new Promise((resolve, reject) => { setTimeout(resolve, time, [time]); })} var p1 = makeFullJSON(1000); var p2 = makeFullJSON(500); var p3 = makeFullJSON(750); p1.then(array => { console.log('Promise 1 complete', array);}); p2.then(array => { console.log('Promise 2 complete', array);}); p3.then(array => { console.log('Promise 3 complete', array);}); console.log('Array of resolved values:', await Promise.all([p1, p2, p3])); console.log('Promise END'); })();