等待第一个await完成后再执行第二个await - Async/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

在这个例子中，由于第二个函数所需的时间较少，在打印'Hi'之前，先打印了'Bye'。但是我希望确保第一个函数执行完毕后，才会执行第二个函数。

- Sathya Narayanan GVK

---

等待 Promise.all([one, two]) 执行完毕？ - Roko C. Buljan

第一个函数在第二个函数之前完成。实际上，两个函数都几乎瞬间完成，但超时没有完成。 - Robby Cornelissen

await 与 Promise 配合使用。你的两个函数都没有返回 Promise。await one() 没有意义。 - Yury Tarabanko

Answer 1

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

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()

- Krzysztof Krzeszewski

Answer 2

你这里有多个问题。首先，你的函数one()和two()不是异步的，所以无法等待它们。其次，带有超时的测试代码不准确。超时函数也不是异步的，为了解决这个问题，我将其包装在一个Promise中，以便我们可以使用超时函数进行测试。

请参见以下片段：

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>

- Creative

Answer 3

我认为，承诺必须是：

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

- Rustam Pulatov

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

- this is yash

---

嗨@JonasWilms，你能否详细说明一下，我应该称它为进程吗？ - this is yash

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();

- vaibhav pandey