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?

If you said...

Hello.
Goodbye!
Hello again!

You are on the right track but wrong.

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);
  }); 

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

fetch("http://startrek/planets")

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();
  })

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);
  }); 

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);
}

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

async getPlanets() {

}

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");

}

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();
}

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);
}

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.

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!