Javascript — ES8 Introducing `async/await` Functions

To gain some perspective on why folks are so excited about the ES8 async/await functions, you have to be familiar with the evolution of asynchronous behaviors and solutions in JS.

Callbacks

Or more precisely, callback inside of callback inside of callback…

Callbacks present several problems. They can be difficult to follow as well as construct. They are rigid in their form. They are ugly and unwieldy. This eventually led to the mainstream adoption of the term ‘callback hell’.

Callbacks serve their purpose but when you begin working with more complex applications and navigation patterns with complex relational data, you need a better solution. Enter PROMISES.

Promises

Give the power back to the people.

A promise is a more sophisticated solution to the asynch problems in JS. The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A promise is always in one of 3 states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

A pending promise can either be fulfilled or rejected, at which point the appropriate handler is called via .then() for successes and .catch() for errors.

The main thing to keep in mind: A promise represents the eventual result of an asynchronous operation.

Let’s look at some code:

basic promise examples

Real-world promise example

You can see how lines 34–36 are much cleaner than our callback examples.

An improvement but still issues here. You can still end up in a promisey-pyramid of doom much like with callbacks. Looping in promises is nuanced and non-intuitive.You also have to remember to use things like catch() and deferred.

Enter Async/Await functions.

ES8 async/await functions

Now let’s look at the newest iteration of asynchronous solutions in JS the async/await function.

The async function declaration defines an asynchronous function, which returns an AsyncFunction object.

When an async function is called, it returns a Promise. When the async function returns a value, the Promise will be resolved with the returned value. When the async function throws an exception or some value, the Promise will be rejected with the thrown value.

An async function can contain an await expression, that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

Let’s look at some code:

In this example you will see STANDARD PROMISE in action followed by the same code implemented with ASYNC/AWAIT

standard promise vs async/await

Rather than a chain of promises(4–11) you can write the same code in a single function(16–23).

The main reason that you may want to begin to implement async/await in your code is that it allows you to write code that looks and also executes asynchronously without blocking the thread.

So that’s it for Async/Await Functions in ES6. Let us know your thoughts and questions and PLEASE follow us on twitter. Keep after it.

If you like this article, please recommend and share to help others find it!