Использование Async / Await на множественное время ожидания

Question

Чтобы понять async / await, я пытаюсь отобразить консольное сообщение после того, как установленное время ожидания истекло.Как мне исправить мой код ниже?У меня есть 5 установок времени ожидания, и каждый должен отобразить соответствующее сообщение после завершения.

function t1(){
    setTimeout(() => {
    console.log("1")
    }, 1000);
}

function t2(){
    setTimeout(() => {
    console.log("2")
    }, 2000);
}

function t3(){
    setTimeout(() => {
    console.log("3")
    }, 3000);
}

function t4(){
    setTimeout(() => {
    console.log("4")
    }, 4000);
}

function t5(){
    setTimeout(() => {
    console.log("5")
    }, 5000);
}

async function main(){
    await t1();
    console.log("1sec done");
    await t2();
    console.log("2sec done");
    await t3();
    console.log("3sec done");
    await t4();
    console.log("4sec done");
    await t5();
    console.log("Yay! I am all done");
}
main();

Answer 1

Вы должны использовать Обещания

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

function t2(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("2");
        resolve();
      }, 1000);
   });
}

function t3(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("3");
        resolve();
      }, 1000);
   });
}

function t4(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("4");
        resolve();
      }, 1000);
   });
}

function t5(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("5");
        resolve();
      }, 1000);
   });
}

async function main(){
    await t1();
    console.log("1sec done");
    await t2();
    console.log("2sec done");
    await t3();
    console.log("3sec done");
    await t4();
    console.log("4sec done");
    await t5();
    console.log("Yay! I am all done");
}
main();

Answer 2

Для каждой из функций от t1() до t5() вам необходимо убедиться, что они возвращают Promise, так что возвращаемое обещание "разрешается" после завершения соответствующего таймера setTimeout() внутри.

Возвращая объект Promise таким способом, ваши t1() -> t5() функции эффективно становятся async методами, что, в свою очередь, означает, что префикс await приведет к выполнению main() дляблокировать до тех пор, пока каждая t1() -> t5() функция не будет завершена (или «разрешена»).

Чтобы проиллюстрировать это, рассмотрим следующий код, в котором общая функция delay() заменяет t1() ->t5() функции в вашем исходном коде:

/* I've defined a generic delay function as replacement
for t1 - t5 functions to minimise the amount of code */
function delay(seconds) {

  /* Return a promise object that will cause the
  await to prevent main() async function's execution
  from continuing until this promise has resolved */
  return (new Promise((resolve) => {

    /* Inside the promise, set your time out */
    setTimeout(() => {
      console.log(seconds)

      /* When time out complete, call resolve(), which
      resolves this promise and allows main() async 
      function's execution to continue */
      resolve()
    }, seconds * 1000);

  }))

}

async function main() {
  await delay(1);
  console.log("1sec done");
  await delay(2);
  console.log("2sec done");
  await delay(3);
  console.log("3sec done");
  await delay(4);
  console.log("4sec done");
  await delay(5);
  console.log("Yay! I am all done");
}
main();

Answer 3

Вы делаете две ошибки

• Сначала вы используете await перед вызовом функции t1,t2,t3....await следует использовать для Обещаний .
• Вы передаете 1000,2000,... на setTimeout().Вы должны создать функцию, которая возвращает Promise, которая будет разрешена через 1 секунду
• Используйте await до обещания, возвращенного этой функцией

let afterOne = (num) => new Promise(res => {
    setTimeout(()=>{
      //log the number passed to function after 1000 ms
      console.log(num);
      //resolve the current promise so then next setTimeout could be set
      res();
   },1000)
  })
async function main(){
    /*This loop does same as
       await afterOne(0);
       await afterOne(1);
       await afterOne(2)
       await afterOne(3);
       await afterOne(4);
    */
    for(let i = 0;i<5;i++){
      await afterOne(i)
    }
}
main();