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 object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A promise is always in one of 3 states: Promise : initial state, neither fulfilled nor rejected. pending : meaning that the operation completed successfully. fulfilled : meaning that the operation failed. rejected 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 represents the result of an asynchronous operation. promise eventual 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 declaration defines an , which returns an object. async function asynchronous function AsyncFunction When an async function is called, it returns a . 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. Promise An async function can contain an 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. await Let’s look at some code: In this example you will see in action followed by the same code implemented with STANDARD PROMISE 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 follow us on . Keep after it. PLEASE twitter If you like this article, please recommend and share to help others find it!