如何在函数返回之前等待 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 个 Promise 解决后才会发生的代码，因为这听起来像是你想要发生的那样，那么我建议在你的代码下直接创建一个新函数，以包含代码您希望在解决后发生，并传递该函数，例如：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');
});

如果您想在所有承诺都实现后对操作进行排序，您必须使用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');
})();