Javascript 如何在函数返回之前等待承诺完成

How to wait for promise to finish before function returns

提问by S. Vaghar

Basic 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');

The code output is:

代码输出为：

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

How do you rewrite the code, such that output is:

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

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

回答by Kent Weigel

Anything that you want to happen after the completion goes in the arrow function that you pass to then.

完成后您希望发生的任何事情都在您传递给 then 的箭头函数中。

    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');
    });

In order to abandon immediate program execution, and start writing code which would happen only after all 3 promises resolve, as it sounds like you want to happen, then I would recommend creating a new function directly below your code, to contain code which you would like to happen after resolution, and pass that function like: Promise.all([p1, p2, p3]).then(newFunctionName). It might be easier for you to visualize it that way, at least until you get used to thinking about how it works precisely.

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

回答by rasmeister

First fix the syntax error. Then move the console.log to where the entire process ends:

首先修复语法错误。然后将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');
});

回答by JSelser

If the obvious answer of placing the console.log('Promise END')doesnt float your boat, why not this?

如果放置的明显答案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');
});

If you want to sequence an operation after all promises were fulfilled, you have to sequence with then()just as you are doing when you print your array values

如果您想在所有承诺都完成后对操作进行排序，则必须then()像打印数组值时所做的那样进行排序

回答by jib

Use async/await:

使用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');
})();