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:
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
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 me know your thoughts and questions and give me a follow on twitter. Keep after it.