41 A roadmap for asynchronous programming

This chapter is a brief roadmap for asynchronous programming.

41.1 The next chapters

The next chapters explain asynchronous programming in JavaScript:

• “Foundations of asynchronous programming in JavaScript” (§42):
  • We’ll see how synchronous function calls work.
  • We’ll also explore JavaScript’s way of executing code in a single process, via its event loop.
  • Asynchronicity via callbacks is also described in that chapter.
• “Promises for asynchronous programming ^ES6” (§43)
• “Async functions ^ES2017” (§44)
• “Asynchronous iteration ^ES2018” (§45) concludes this series of chapters on asynchronous programming. Asynchronous iteration is similar to synchronous iteration, but iterated values are delivered asynchronously.

The remainder of this chapter gives you some first ideas of what all of that means.

41.2 Synchronous functions

Normal functions are synchronous: the caller waits until the callee is finished with its computation. divideSync() in line A is a synchronous function call:

function main() {
  try {
    const result = divideSync(12, 3); // (A)
    assert.equal(result, 4);
  } catch (err) {
    assert.fail(err);
  }
}

41.3 JavaScript executes tasks sequentially in a single process

By default, JavaScript tasks are functions that are executed sequentially in a single process. That looks like this:

while (true) {
  const task = taskQueue.dequeue();
  task(); // run task
}

This loop is also called the event loop because events, such as clicking a mouse, add tasks to the queue.

Due to this style of cooperative multitasking, we don’t want a task to block other tasks from being executed while, for example, it waits for results coming from a server. The next subsection explores how to handle this case.

41.4 Callback-based asynchronous functions

What if divide() needs a server to compute its result? Then the result should be delivered in a different manner: The caller shouldn’t have to wait (synchronously) until the result is ready; it should be notified (asynchronously) when it is. One way of delivering the result asynchronously is by giving divide() a callback function that it uses to notify the caller.

function main() {
  divideCallback(12, 3,
    (err, result) => {
      if (err) {
        assert.fail(err);
      } else {
        assert.equal(result, 4);
      }
    });
}

When there is an asynchronous function call:

divideCallback(x, y, callback)

Then the following steps happen:

• divideCallback() sends a request to a server.
• Then the current task main() is finished and other tasks can be executed.
• When a response from the server arrives, it is either:

  • An error err: Then the following task is added to the queue.

    taskQueue.enqueue(() => callback(err));
    

  • A result value: Then the following task is added to the queue.

    taskQueue.enqueue(() => callback(null, result));
    

41.5 Promise-based asynchronous functions

Promises are two things:

• A standard pattern that makes working with callbacks easier.
• The mechanism on which async functions (the topic of the next subsection) are built.

Invoking a Promise-based function looks as follows.

function main() {
  dividePromise(12, 3)
    .then(result => assert.equal(result, 4))
    .catch(err => assert.fail(err));
}

41.6 Async functions

One way of looking at async functions is as better syntax for Promise-based code:

async function main() {
  try {
    const result = await dividePromise(12, 3); // (A)
    assert.equal(result, 4);
  } catch (err) {
    assert.fail(err);
  }
}

The dividePromise() we are calling in line A is the same Promise-based function as in the previous section. But we now have synchronous-looking syntax for handling the call. await can only be used inside a special kind of function, an async function (note the keyword async in front of the keyword function). await pauses the current async function and returns from it. Once the awaited result is ready, the execution of the function continues where it left off.