在第二个 await -Async/await 之前等待第一个 await 完成

Question

我试图让第二个函数等到第一个函数完成。在以下示例中，我无法实现它。在探索 async/await 时，据说执行顺序是连续的。但是，这里的情况似乎并非如此。

function one() {
  setTimeout(() => {
    console.log('Hi')
  }, 5000)
}

function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

输出

Bye
Hi

在这个例子中，由于函数二涉及的时间更少，'Bye' 在'Hi' 之前打印。但我试图确保第一个函数完成执行时，它应该转到第二个。

Answer 1

这是因为您定义的函数不能是 await ed，因为它们不返回可以解决的承诺。相反，它们会立即完成/立即“解决”。

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Hi')
      resolve();
    }, 5000)
  })
}

function two() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Bye')
      resolve();
    }, 2000)
  })
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

Answer 2

我认为，promise 必须是：

function one() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Hi')
          resolve(x);
       }, 5000);
    });
}


function two() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Bye')
          resolve(x);
       }, 2000);
    });
}

Answer 3

您在这里遇到了多个问题。首先，您的函数 one() 和 two() 不是异步的，因此不能等待它们。其次，您的超时测试代码不是准确的测试。 timeout 函数也不是异步的，为了解决这个问题，我将它包装在 Promise 中，以便我们可以使用 timeout 函数进行测试。

见sn-p：

async function one(){
  await timeout(5000);
  log("Hi");
}

async function two(){
  await timeout(2000);
  log("Bye");
}

async function demo()
{
  await one();
  await two();
}

demo();

function log(logText)
{
  var logNode = document.createTextNode(logText + " ");  
  document.getElementById("log").appendChild(logNode);
}

function timeout(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

#log
{
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

<div id="log"></div>

Answer 4

首先，你要知道 setTimeout() 运行在一个单独的线程中，并且在主线程中的程序执行即使你让它异步也不会停止。

为了达到您的要求，您必须在计时器完成时调用第二个函数

async function one(){
  await setTimeout(()=>{
  console.log('Hi')
  two() //call the second function when the first timer is completed.
  },5000)
}

function two(){
  setTimeout(()=>{
  console.log('Bye')
  },2000)
}

Answer 5

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
     resolve(console.log("hi"))
    }, 5000);
  });
}
function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}
async function asyncCall() {
  var result1 = await one();
  var result2 = await two();
}

asyncCall();