Javascript ES7 - Async / Await in under 3 minutes

a single wait what is it why is it and how is it in this demonstration I'm using the amazing Babel library to get this nifty feature before it hits our browsers I'm also using JSON server to serve two endpoints people and places I want to HTTP requests both of these endpoints and return an array of the results first let's look at where we came from and why async await can be helpful in JavaScript everything is synchronous meaning it doesn't wait around for something that isn't time-sensitive before proceeding to the next line of your code in the past we dealt with asynchronous needs via callbacks in this example I'm first requesting the people endpoint checking if there are any errors assigning the response to an object and then proceeding to the places endpoint and doing the same thing as you can see if we continued along these lines any further we'd end up with something known as callback hell or tormentor is going to torment it looks like my array of objects is returning as expected now let's look at one way of solving callback hell with promises here I've created a service object with two methods for retrieving my data I'm using the Axios library to return these as promises promises allow you to control your asynchronous flow in a more synchronous manner first I call the get people service which returns a promise when it resolves then I assign the response to an object and return the get places promise then when that promise is resolved I also assign its data to an object and then console.log the object any errors during either of these promises we'll skip ahead to the catch method and log the error this is definitely a much more readable approach than the callback method and can even be cleaned up a bit more by using the native promise all method which takes an array of promises and returns once they're all resolved and now for the moment we've all been waiting for a sync a wait let's you take this idea of controlled asynchronous flow a step further by actually waiting for one promise to resolve before moving to the next line without the use of then and catch methods this is accomplished by a new set of keywords which are async in a wait in order for this to work you must add the keyword async to the beginning of a function and use the await keyword inside the function the await keyword will wait for the get people problem to resolve before Ryan they get places promised once they're both complete a return an object with the response notice how this method allows for me to use the built-in trycatch functionality which feels a little more natural to the language compared with the ven and catch methods in our previous example if we don't need to do anything after each sequential response we can use the promised all method as we did before to pass an array of promises and that concludes the basics of async/await thanks for watching

Channel: Andrew Del Prete

Views: 35,330

Rating: 4.8125 out of 5

Keywords: Javascript, Async, Await, Promises, ES7, Callbacks, asynchronous

Id: COKdtOgopWQ

Length: 2min 45sec (165 seconds)

Published: Sun Feb 28 2016