Create Async Function

Create async function with function declaration

async function myAsyncFunc() {
// some code
}

Create async function with function expression

const myAsyncFunc = async function() {
// some code
}

Create async function with arrow function

const myAsyncFunc = async () => {
// some code
}

Example no.1: using return statement

async function myAsyncFunc() {
// Return some value using 'return' statement
return 'There will be dragons.'
}

// Invoke the async function
// and get and process the returned promise
// to get the value
myAsyncFunc()
.then(res => console.log(res))
// Optionally catch and log any errors
.catch(err => console.log(err))

// Output:
// 'There will be dragons.'

Example no.2: using Promise.resolve()

async function myAsyncFunc() {
// Return some value using 'return' statement
return Promise.resolve('There will be dragons.')
}

// Invoke the async function
// and get and process the returned promise
// to get the value
myAsyncFunc()
.then(res => console.log(res))
// Optionally catch and log any errors
.catch(err => console.log(err))

Or assign the result to variable

async function myAsyncFunc() {
// Return some value using 'return' statement
return Promise.resolve('There will be dragons.')
}

// Invoke the async function
// and get and process the returned promise
// to get the value
// and assign the result to variable
const result = myAsyncFunc()
.then(res => console.log(res))
// Optionally catch and log any errors
.catch(err => console.log(err))

// Output:
// 'There will be dragons.'

The await keyword

// Create async function
async function myAsyncFunction() {
// Create new promise
const messagePromise = new Promise((resolve, reject) => {
  // Wait for 0.5s
  setTimeout(() => {
    // Resolve the promise
    resolve('There will be dragons.')
  }, 500)
})

// Invoke messagePromise and wait until it is resolved
// Once it is resolved assign the resolved promise to a variable
const messageResult = await messagePromise
// NOTE: await will cause myAsyncFunction() to pause here
// until the messagePromise is settled (resolved or rejected)

// Log the result
console.log(messageResult)
}

// Invoke the myAsyncFunction() function
myAsyncFunction()

// Output:
// 'Promise is finished.'

Is the same as

async function myAsyncFunction() {
// Create new promise
const messagePromise = new Promise((resolve, reject) => {
  // Wait for 0.5s
  setTimeout(() => {
    // Resolve the promise
    resolve('There will be dragons.')
  }, 500)
})
  // Use then() to process resolved promise
  // and get the returned value
  .then(res => {
    console.log(res)
  })
}

// Invoke the myAsyncFunction() function
myAsyncFunction()
// 'There will be dragons.'

Top-level await

// Pseudo-top-level await
// Create async function
(async () => {
// Create new promise
const myPromise = new Promise((resolve, reject) => {
  // Resolve the promise
  resolve('Promise resolved!.')
})

// Await the promise
// and assign the result to a variable
const message = await myPromise

// Log the message from resolved promise
console.log(message)
})()

// Output:
// 'Promise resolved!.'

Async/await and error handling.

// Create async function
async function myAsyncFunc() {
// Create new promise that rejects
const myPromise = new Promise((resolve, reject) => {
  reject('Promise rejected!')
})

// Create try...catch statement
try {
// Await the promise to get rejected
const message = await myPromise
}
catch(err) {
// Catch any error and log it
console.log(`error: ${err}`)
}
}

// Invoke the myAsyncFunc() function
myAsyncFunc()
// 'error: Promise rejected!'

Use Promise.all() method.

// Create async function
async function myAsyncFunc() {
// Create timestamp when function is invoked
const dateStart = Date.now();

// Create new promise and await its completion
await new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 1 is done.');
}, 450);
});

// Create new promise and await its completion
await new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 2 is done.');
}, 750);
});

// Create another promise and also await its completion
await new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 3 is done.');
}, 1250);
});

// Create timestamp when all promises are resolved
const dateFinished = Date.now();

// Return a message at the end of function execution
return `All promises are done. Time: ${(dateFinished - dateStart) / 1000}s.`;
}

// Invoke the myAsyncFunc() function
myAsyncFunc()
.then(res => {
console.log(res);
});
// Example output: 'All promises are done. Time: 2.45s.'

As you can see, when the function waited for all promises to settle it took it around 2 seconds to execute the whole block. This is because all promises in the example above that are preceded by await keyword are executed in a sequence. So, when one awaited promise is being executed other promises that follow it has to wait. Fortunately, there is a way to make this faster. You can run all those promises in parallel and await only the final result of those promises. To do that you can use Promise.all() method. This method accepts an iterable object of promises, like an array. When all promises are settled it returns one promise withe all values. So, what you need to do is to take those promises and put them inside the Promise.all(). Then, instead of awaiting all those promises you will await only the Promise.all().

// Create async function
async function myAsyncFunc() {
  // Create timestamp when function is invoked
  const dateStart = Date.now();

  // Use Promise.all() to wrap all promises and await its completion
  await Promise.all([
      // Create new promise and await its completion
      // Until then, pause execution of this function

      new Promise((resolve) => {
        setTimeout(() => {
          resolve('Promise 1 is done.');
        }, 450);
      }),
      // Create new promise and await its completion
      // Until then, pause execution of this function
      new Promise((resolve) => {
        setTimeout(() => {
          resolve('Promise 2 is done.');
        }, 750);
      }),
      // Create new promise and await its completion
      // Until then, pause execution of this function
      new Promise((resolve) => {
        setTimeout(() => {
          resolve('Promise 3 is done.');
        }, 1250);
      })
    ]);

// Create timestamp when all promises are resolved
const dateFinished = Date.now();

// Return a message a the end of function execution
// with time it took to execute it
return \`All promises are done. Time: \${(dateFinished - dateStart) / 1000}s.\`;
}

// Invoke the myAsyncFunc() function
myAsyncFunc()
// Process the resolved promise returned by myAsyncFunc() function
.then(res => {
// Log the message from myAsyncFunc() function
console.log(res);
});
// 'All promises are done. Time: 1.264s.'