JavaScript: Using await to make asnyc code look more synchronous

Question

I am trying to understand the asnyc await functionality. Therefore, i want to use an asnyc function, resolve it and do the following logs sequentially afterwards.

How do I achieve this? Or am I understanding something fundamentally wrong?

const test = async function() {
    console.log('hi 1');
    await setTimeout(() => {
        console.log('timout1')
    }, 1000);
    console.log('hi 2');
    console.log('hi 3');
}
test()

Result

hi 1
hi 2
hi 3
timout1

Expected Result

hi 1
timout1
hi 2
hi 3

Hemant Parashar · Accepted Answer · 2020-06-15T21:26:24.160

You can use await for promises only and the setTimeout function doesn't return a Promise. However you can await a Promise that is resolved using setTimeout like so which will give you the desired result.

So, the function execution will halt untill either the Promise being awaited gets resolved or gets rejected and then continue.

const test = async function() {
  console.log('hi 1');
         // return a new promise resolved after setTimeout callback is fired
  await (new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('timout1')
      resolve()
    }, 1000)
  }))
  console.log('hi 2');
  console.log('hi 3');
}

test()

Hope this helps !

Ah! You are right! Just because *setTimeout()* is asnyc doesn´t mean its a promise! — Jimbo.Koen, Jun 16 '20 at 07:11

score 1 · Answer 2 · answered Jun 15 '20 at 21:27

I hope this code help you to understand async await.

function resolveAfter2Seconds() {
   return new Promise(resolve => {
     setTimeout(() => {
        resolve('resolved');
     }, 2000);
   });
}

async function asyncCall() {
   console.log('hi 1');
   const result = await resolveAfter2Seconds();
   console.log(result);
   console.log('hi 2');
   console.log('hi 3');
}

asyncCall();

JavaScript: Using await to make asnyc code look more synchronous

2 Answers2