Key Concepts

Review core concepts you need to learn to master this subject

Async Await Promises

Asynchronous JavaScript function

JavaScript aysnc await operator

JavaScript async…await advantage

Async Function Error Handling

Using async await syntax

Resolving JavaScript Promises

Async Await Promises

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds

The async...await syntax in ES6 offers a new way write more readable and scalable code to handle promises. It uses the same features that were already built into JavaScript.

Async Await
Lesson 1 of 1
  1. 1
    Introduction
    Often in web development, we need to handle asynchronous actions— actions we can wait on while moving on to other tasks. We make requests to networks, databases, or any number of similar oper…
    Start
  2. 2
    The async Keyword
    The async keyword is used to write functions that handle asynchronous actions. We wrap our asynchronous logic inside a function prepended with the async keyword. Then, we invoke that function. asy…
    Start
  3. 3
    The await Operator
    In the last exercise, we covered the async keyword. By itself, it doesn’t do much; async functions are almost always used with the additional keyword await inside the function body. The await key…
    Start
  4. 4
    Writing async Functions
    We’ve seen that the await keyword halts the execution of an async function until a promise is no longer pending. Don’t forget the await keyword! It may seem obvious, but this can be a tricky mistak…
    Start
  5. 5
    Handling Dependent Promises
    The true beauty of async…await is when we have a series of asynchronous actions which depend on one another. For example, we may make a network request based on a query to a database. In that cas…
    Start
  6. 6
    Handling Errors
    When .catch() is used with a long promise chain, there is no indication of where in the chain the error was thrown. This can make debugging challenging. With async…await, we use try…catch sta…
    Start
  7. 7
    Handling Independent Promises
    Remember that await halts the execution of our async function. This allows us to conveniently write synchronous-style code to handle dependent promises. But what if our async function contains mult…
    Start
  8. 8
    Await Promise.all()
    Another way to take advantage of concurrency when we have multiple promises which can be executed simultaneously is to await a Promise.all(). We can pass an array of promises as the argument to P…
    Start
  9. 9
    Review
    Awesome work getting the hang of the async…await syntax! Let’s review what you’ve learned: + async…await is syntactic sugar built on native JavaScript promises and generators. + We declare an …
    Start

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo