JavaScript ES 2017: Learn Async/Await by Example – codeburst

  • Consider the below code:function doubleAfter2Seconds(x) { return new Promise(resolve = { setTimeout(() = { resolve(x * 2); }, 2000); });}In this code we have a function called doubleAfter2Seconds.
  • Here’s what the boilerplate code looks like:function addPromise(x){ return new Promise(resolve = { // Code goes here… // resolve() });}Awesome.
  • In this example we should be returning x + 2*a + 2*b + 2*c. Here’s the code:function addPromise(x){ return new Promise(resolve = { = { = { = { resolve(x + a + b + c); }) }) }) });}Lets walk through the code again, line by line.First, we create…
  • Here’s what that looks like:async function addAsync(x) { // code here…}Now that you’ve created an async function, we can make use of the await keyword which will pause our code until the Promise has resolved.
  • Here’s how easy that is:async function addAsync(x) { const a = await doubleAfter2Seconds(10); const b = await doubleAfter2Seconds(20); const c = await doubleAfter2Seconds(30); return x + a + b + c;}And here’s the full code:As you can see, we’re still making use of the same doubleAfter2Seconds function.

ES 2017 introduced Asynchronous functions. Async functions are essentially a cleaner way to work with asynchronous code in JavaScript. In order to understand exactly what these are, and how they work…

What is Async/Await?The newest way to write asynchronous code in JavaScript.It is non blocking (just like promises and callbacks).Async/Await was created to simplify the process of working with and writing chained promises.Async functions return a Promise. If the function throws an error, the Promise will be rejected. If the function returns a value, the Promise will be resolved.SyntaxWriting an async function is quite simple. You just need to add the async keyword prior to function:// Normal Functionfunction add(x,y){ return x + y;}// Async Functionasync function add(x,y){ return x + y;}AwaitAsync functions can make use of the await expression. This will pause the async function and wait for the Promise to resolve prior to moving on.Example TimeEnough talk. To understand what all of this means, lets look at an example! First we’re going to create some code using promises. Once we’ve got something working, we’ll rewrite our function using async/await so you can see just how much simpler it is!If you’re using Google Chrome, be sure to follow along by typing in the code into your developer console. You can open the console by pressing Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).Consider the below code:function doubleAfter2Seconds(x) { return new Promise(resolve = { setTimeout(() = { resolve(x * 2); }, 2000); });}In this code we have a function called doubleAfter2Seconds. This function will take a number as input and will resolve two seconds later with the number doubled.We can invoke our function and pass in the number 10 to try it out….

JavaScript ES 2017: Learn Async/Await by Example – codeburst