How do I use async/await in JavaScript?

Question

I have the following code:

function one() {

    setTimeout(() => {

        console.log('one');
    }, 2000);
}

function two() {
    console.log('two');
}

function three() {
    console.log('three');
}

function wrapper() {
    one();
    two();
    three();
}

wrapper();

This of course console logs them in the following order: two three one

Using async / await I'd like to console log them in the following order: one two three

I'm not sure how to achieve this.

Thanks

Possible duplicate of [Combination of async function + await + setTimeout](https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout) — Ivar, Nov 21 '19 at 09:02
it's already implemented in most browsers https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function. if you want old IE support you need babel/webpack — Daniel Lizik, Nov 21 '19 at 09:05

score 2 · Accepted Answer · answered Nov 21 '19 at 09:46

You have to make use of async and Promises. Please have a look at the documentation.

The code below returns a Promise call. The Promise itself sets a timeout of two seconds and after this time it logs "one" to the console.

You can wait for the promise to finish using the await-keyword right before the function call.

Note that the functions have to be async.

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

Heres a updated version of your code - I hope this helps:

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

async function two() {
  console.log('two');
}

async function three() {
  console.log('three');
}

async function wrapper() {
  await one();
  await two();
  await three();
}

wrapper();

Nakarmi · Answer 2 · 2019-11-21T09:58:51.273

1

async function one(){ 
  await new Promise(resolve => 
  setTimeout(async () => {
     await resolve(console.log('one'));
    }, 2000));
 
}

function two() {
    console.log('two');
}

function three() {
    console.log('three');
}
async function wrapper(){ await one(); two(); three();}

wrapper();

edited Nov 21 '19 at 09:58

answered Nov 21 '19 at 09:23

Nakarmi

453
1
6
15

Why do we need setTimeout. This will just delay the output and "one" will never be populated first. Let's focus on the required output. – Nakarmi Nov 21 '19 at 09:33
Ok, so I've edited by applying the setTimeout. Does this satisfy the query. – Nakarmi Nov 21 '19 at 09:59
1

Thanks for the update. As far as I can tell this is exactly what OP is after. I've retracted my downvote. One last remark: it is always recommended to add an explanation of what changes you made so OP and future visitors can learn from it/know how to apply it themselves. – Ivar Nov 21 '19 at 10:06

score -2 · Answer 3 · answered Nov 21 '19 at 09:07

-2

function who() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('');
    }, 200);
  });
}

function what() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('lurks');
    }, 300);
  });
}

function where() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('in the shadows');
    }, 500);
  });
}

async function msg() {
  const a = await who();
  const b = await what();
  const c = await where();

  console.log(`${ a } ${ b } ${ c }`);
}

msg(); //  lurks in the shadows <-- after 1 second

answered Nov 21 '19 at 09:07

Vladimir Pustovit

1
1

4

Even a copy of a good answer (attributed or not, though that is important for other reasons) is still not considered a good answer on StackOverflow, if there is no explanation. Please add (attribution and) an explanation of how this solves the problem and how it works in detail. If you cannot do that, then just copying it is even less appreciated. – Yunnosch Nov 21 '19 at 09:20

How do I use async/await in JavaScript?

3 Answers3