DEV Community

reyes2981
reyes2981

Posted on

what i learned last week: overview of async and await

Welcome! This week I'll be reviewing async and await. I haven't written a blog entry in a couple of weeks so let's get to it!

What is going to display first, second and third in the console when I run the below program?
async1
If you said...

Hello.
Goodbye!
Hello again!
Enter fullscreen mode Exit fullscreen mode

You are on the right track but wrong.
async3
So why did the program not run the code synchronously, line by line? Well, because setTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack.

For a more detailed example of asynchronous functions let's check out some code from the what i learned last week: overview of fetch() entry...

fetch("http://startrek/planets", configObj)
  .then(function(response) {
    return response.json();
  })
  .then(function(object) {
    console.log(object);
  }); 
Enter fullscreen mode Exit fullscreen mode

First, fetch() makes an HTTP request to a resource via a URL.

fetch("http://startrek/planets")
Enter fullscreen mode Exit fullscreen mode

Next, we utilize the then() method to handle the returned promise. and the json() method, It returns a promise which resolves with the result of parsing the body text as JSON.

  .then(function(response) {
    return response.json();
  })
Enter fullscreen mode Exit fullscreen mode

Finally, I can do work with the JSON data. In this case I just want to display the returned data in the console.

  .then(function(object) {
    console.log(object);
  }); 
Enter fullscreen mode Exit fullscreen mode

While this code is perfectly acceptable we can make it more leaner with async/wait!

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}
Enter fullscreen mode Exit fullscreen mode

First, I declared a function with the async keyword which means means that the function will return a promise in response.

async getPlanets() {

}
Enter fullscreen mode Exit fullscreen mode

Second I created the response variable and saved a fetch request to it. Do you notice anything specific about the below code. Take your time I'll await...

The await keyword makes a function wait for a Promise.

async getPlanets() {
   let response = await fetch("http://startrek/planets");

}
Enter fullscreen mode Exit fullscreen mode

Next, I created the data variable and saved the result of calling json() on response.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let data = await request.json();
}
Enter fullscreen mode Exit fullscreen mode

Finally, I can do work with my newly returned JSON object, again, in this case I just want to display the data in the console.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}
Enter fullscreen mode Exit fullscreen mode

As you can see utilizing the async/await keywords is a fantastic supplement to promises. With that being said, it's important to note that async/await aren't necessarily substitutes for promises but what programmers like to call syntactic sugar.

async4

I'm going to keep this blog entry cute and simple and end it here. I appreciate all comments and feedback. Thank you for reading!

Top comments (0)