The async / await operators make it easier to implement many async Promises. They also allow engineers to write clearer, more succinct, testable code.

To understand this subject, you should have a solid understanding of how Promises work.

Basic Syntax

function slowlyResolvedPromiseFunc(string) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(string);
    }, 5000);
  });
}

async function doIt() {
  const myPromise = await slowlyResolvedPromiseFunc("foo");
  console.log(myPromise); // "foo"
}

doIt();

There are a few things to note:

  • The function that encompasses the await declaration must include the async operator. This will tell the JS interpreter that it must wait until the Promise is resolved or rejected.
  • The await operator must be inline, during the const declaration.
  • This works for reject as well as resolve.

Nested Promises vs. Async / Await

Implementing a single Promise is pretty straightforward. In contrast, Chained Promises or the creation of a dependency pattern may produce “spaghetti code”.

The following examples assume that the request-promise library is available as rp.

Chained/Nested Promises

// First Promise
const fooPromise = rp("http://domain.com/foo");

fooPromise.then(resultFoo => {
    // Must wait for "foo" to resolve
    console.log(resultFoo);

    const barPromise = rp("http://domain.com/bar");
    const bazPromise = rp("http://domain.com/baz");

    return Promise.all([barPromise, bazPromise]);
}).then(resultArr => {
    // Handle "bar" and "baz" resolutions here
    console.log(resultArr[0]);
    console.log(resultArr[1]);
});

async and await Promises

// Wrap everything in an async function
async function doItAll() {
    // Grab data from "foo" endpoint, but wait for resolution
    console.log(await rp("http://domain.com/foo"));

    // Concurrently kick off the next two async calls,
    // don't wait for "bar" to kick off "baz"
    const barPromise = rp("http://domain.com/bar");
    const bazPromise = rp("http://domain.com/baz");

    // After both are concurrently kicked off, wait for both
    const barResponse = await barPromise;
    const bazResponse = await bazPromise;

    console.log(barResponse);
    console.log(bazResponse);
}

// Finally, invoke the async function
doItAll().then(() => console.log('Done!'));

The advantages of using async and await should be clear. This code is more readable, modular, and testable.

It’s fair to note that even though there is an added sense of concurrency, the underlying computational process is the same as the previous example.

Handling Errors / Rejection

A basic try-catch block handles a rejected Promise.

async function errorExample() {
  try {
    const rejectedPromise = await Promise.reject("Oh-oh!");
  } catch (error) {
    console.log(error); // "Uh-oh!"
  }
}

errorExample();