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.
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.
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
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.
async function declaration defines an asynchronous function, which returns 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.
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.