Why await/async in Javascript does not work as expected?

As a way to learn async/await in Javascript, I created the following JSFiddle sample code

async function func1() {
  return await setTimeout(() => {
  	console.log('execute func1');
  }, 5000);
}

async function func2() {
  return await setTimeout(() => {
  	console.log('execute func2');
  }, 2000);
}

async function mainFunc() {
	await func1();
  await func2();

  console.log('execute completed'); 
}

mainFunc();

Since I have await, I expected the output will be:

execute func1
execute func2
execute complete

But to my surprise, the output is

execute complete
execute func2
execute func1

I must have missed some important concept on this, any suggestion is highly welcomed.

You have to create a promise inside func1 and func2

This is easy to do once you get the hang of it, but not at all obvious if you haven't practiced.

setTimeout itself does not return a promise: it returns a reference to the timer that can be used to cancel the timeout process.

To get a Promise instead, use the new Promise constructor. In simple use, you feed in the word resolve, and the function you want to run, in this case setTimeout. At the point in your function that you want to return a result, do not use return: instead use resolve.

For example, if you wanted to return the number 42 after a 1 second delay, you can use the following. It in fact immediately returns a promise that, after 1 second, resolves to the number 42. To get the effect of returning a value after a delay, you would need to await the result.

return new Promise(resolve, setTimeout(()=>{resolve(42)},1000)

In your case you don't want to return any particular result from the setTimeout, so you don't need to put anything inside the parentheses of resolve.

The word resolve is in fact a dummy function name: you could use any variable name but it is conventional to call it resolve to prevent unnecessary bafflement for readers.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

async function func1() {
  return new Promise(resolve => setTimeout(
    () => {
      console.log('execute func1');
      resolve()
    }, 5000))
}

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

async function mainFunc() {
  await func1();
  await func2();
  console.log('execute completed');
}

mainFunc();

<!-- end snippet -->