JavaScript Concurrency: Multiple Awaits

• Async functions can contain more than one await. Here's a delayed double function that we'll use in our examples. (Remember that async functions return promises!)

• >

  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
  function double(n) {
    return sleep(500).then(() => 2 * n);
  }

• We can call double three times by assigning each result to a new variable.

• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  async function octuple(n) {
    const doubled = await double(n);
    const quadrupled = await double(doubled);
    const octupled = await double(quadrupled);
    return octupled;
  }
  
  octuple(3);

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  {fulfilled: 24}

• We can also collapse those calls into a single line of code. Either form may be preferable depending on the situation. With async/await, we can choose between them, whereas regular promises force us to use then chains.

• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  async function octuple(n) {
    return await double(await double(await double(n)));
  }
  
  octuple(3);

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  {fulfilled: 24}

• Under the hood, each await will call then, effectively pausing the function at that point. If we rewrite the code to show that explicitly, it becomes more complex and more difficult to read. But it shows us that async/await is only "syntactic sugar": it's a nicer-looking syntax for creating promises, even though we can always create them the old way too.

• Here's a closer look into how our octuple function works. We have to introduce some temporary variables, prefixed with _ to distinguish them.

• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  function octuple(n) {
    const _temp1 = double(n);
    return _temp1.then(_temp2 => {
      return double(_temp2).then(_temp3 => {
        return double(_temp3);
      });
    });
  }
  
  octuple(3);

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  {fulfilled: 24}

• In this case, we could also write a nice equivalent with promises: return double(3).then(double).then(double). However, most real-world async/await code doesn't convert into promises so nicely. Often, async/await can turn ugly nested promise code like the example above into clean-looking function calls.

• Here's a code problem:

  Complete this addSix function. It should add 6 to its argument. But it should do that by calling the addTwo function three times. (Remember, we can only use await within an async function!)

  9

  1

  2

  3

  4

  async function addTwo(n) {

  return Promise.resolve(n + 2);

  }

  
  

  13

  5

  6

  7

  async function addSix(n) {

  return await addTwo(await addTwo(await addTwo(n)));

  }

  16

  8

  Promise.all([addSix(3), addSix(7)]);

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  Goal:

  {fulfilled: [9, 13]}

  Yours:

  {fulfilled: [9, 13]}

  Show Author's Answer