Javascript 多个promise在等待中

重要的是要记住，await不会阻塞JavaScript解释器.在等待的过程中，其他事情仍然可能发生，其他代码片段仍然可以在等待的事件完成之前执行.await关键字只会阻止你的功能.

首先，这两种情况是相同的:计划在10秒后完成的任务总是在10秒后完成，而计划在20秒后完成的任务总是在20秒后完成.一直都是.这两个任务都不需要30秒就能完成，因为这两个任务都是并行启动的.

为了验证这一点，让我们在测试代码中删除await:

function handlePromise() {
    p1.then((val) => {
        console.log("Namaste JavaScript");
        console.log(val);
    }).catch((error) =>  {
        console.error("Error:", error);
    })

    p2.then((val2) => {
        console.log("Namaste JavaScript 2");
        console.log(val2);
    }).catch((error) =>  {
        console.error("Error:", error);
    })
}
handlePromise();

在场景1中，p2先完成，然后p1在10秒后完成，而在场景2中，情况正好相反.两个计时器并行运行.

在您的代码中，您基本上是这样做的:

function handlePromise() {
    p1.then((val) => {
        console.log("Namaste JavaScript");
        console.log(val);
        return p2;
    }).then((val2) => {
        console.log("Namaste JavaScript 2");
        console.log(val2);
    }).catch((error) =>  {
        console.error("Error:", error);
    })
}
handlePromise();

所以在场景1中，p2在p1之前完成，但我们直到p1完成才处理p2的结果.因此，当p1完成时，p2的结果也会立即处理，因为它是在10秒前完成的.

为了得到我认为你期待的结果，不要在你想要setTimeout米开始之前就开始它:

function startP1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise Resolved Value!!");
    }, 20000);
  });
}

function startP2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise Resolved Value!!");
    }, 10000);
  });
}


async function handlePromise() {
  try {
    console.log("Hello World!!");
    const val = await startP1();
    console.log("Namaste JavaScript");
    console.log(val);

    const val2 = await startP2();
    console.log("Namaste JavaScript 2");
    console.log(val2);
  } catch (error) {
    console.error("Error:", error);
  }
}
handlePromise();

PS:

另一件要记住的事情是，对Promise构造函数的回调是同步执行的，而不是异步执行的.通过运行以下代码，我们可以看到情况就是这样:

console.log('hello');
new Promise((ok,fail) => {
  console.log('cruel');
});
console.log('world');

上面的代码打印:

hello
cruel
world

不是hello, world, cruel.您传递给Promise构造函数的函数将同步执行.