what i learned last week: overview of async and await
Tags: javascript
Published: 2021-09-22 16:14:37

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtqcocj6zcwp9ojihf0s.png)
If you said...
```
Hello.
Goodbye!
Hello again!
```
You are on the right track but wrong. 
![async3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m51vc3b23vil0t4js1v7.png)
So why did the program not run the code [synchronously](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous), line by line? Well, because [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/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()](https://dev.to/reyes2981/what-i-learned-last-week-overview-of-fetch-3pke) 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()](https://developer.mozilla.org/en-US/docs/Web/API/Response/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](https://stackoverflow.com/questions/67955033/async-await-with-fetch-js) 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](https://www.w3schools.com/js/js_async.asp) 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](https://en.wikipedia.org/wiki/Syntactic_sugar).  

![async4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcvexx8h2nfw5rof609p.png)

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!