我想使用 JavaScript async/await

Question

给定以下代码：

function timer1(){
  return new Promise(()=>{
    setTimeout(() => {
      console.log("1...");
    }, 1000);
  })
}
function timer2(){
  return new Promise(()=>{
    setTimeout(() => {
      console.log("2...");
    }, 2000);
  })
}
function timer3(){
  return new Promise(()=>{
    setTimeout(() => {
      console.log("3...");
    }, 3000);
  })
}
async function timers(){
  await timer3();
  await timer2();
  await timer1();
}
timers();

输出为：

(After 3 seconds..)
3...

我想得到这个结果：

(After 3 seconds..)
3...
(After 2 seconds..)
2...
(After 1 seconds..)
1...

为什么只打印一个（3 ...）？
我想把这三个都打印出来。

Answer 1

执行setTimout后需要resolve promise

function timer1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("1...");
      resolve();
    }, 1000);
  });
}

function timer2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("2...");
      resolve();
    }, 2000);
  });
}

function timer3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("3...");
      resolve();
    }, 3000);
  });
}

async function timers() {
  await timer3();
  console.log("(After 3 seconds..)");
  await timer2();
  console.log("(After 2 seconds..)");
  await timer1();
  console.log("(After 1 seconds..)");
}

timers();

Answer 2

完成后需要解决

Promise

。否则，它永远不会被视为完成，永远处于待定状态，并且

timer2

永远不会被执行。

传递给

Promise

构造函数的函数传递了两个参数，它们是调用成功或失败终止的函数。

function timer1(){
  return new Promise((resolve, reject) =>{
    setTimeout(() => {
      console.log("1...");
      resolve();
    }, 1000);
  })
}
function timer2(){
  return new Promise((resolve, reject) =>{
    setTimeout(() => {
      console.log("2...");
      resolve();
    }, 2000);
  })
}
function timer3(){
  return new Promise((resolve, reject) =>{
    setTimeout(() => {
      console.log("3...");
      resolve();
    }, 3000);
  })
}
async function timers(){
  await timer3();
  await timer2();
  await timer1();
}
timers();