A key difference between .then() and async-await in JavaScript
Tags: beginners, javascript, webdev
Published: 2020-09-10 17:52:31

![Picture of Asynchronous processes](https://media.sparkpost.com/uploads/2016/11/How-To-Handle-Async-Email-600x300.png)

Asynchronous code can be frustrating when its behaviors are not fully understood.  In JavaScript, `.then()` and `await` are the most commonly used functions for handling asynchronous nature of a `Promise`.  I'd like to take a stab at demystifying some of the quirks that make JavaScript feel "weird" in order to help us take full advantage of asynchrony. 

___

When learning all about `fetch()` and the `Promise` `fetch()` returns, I was introduced to JavaScript's `.then()`function as a means of handling the asynchronous nature of a `Promise`.  So, what's the deal with `async` and `await`? Is it just syntactic sugar to avoid `.then()`'s callback hell? Searching "async vs .then" in google produces front page results such as this [stackoverflow post](https://stackoverflow.com/a/54497100). But, as we all come to know on our coding journey, the devil is in the details... 

In order to examine the behaviors of `async-await` and `then`, I built a small program. First, we need to create a database (I used `json-server`) to make our fetch requests.

![Sample Database to Fetch from on localhost:3000](https://dev-to-uploads.s3.amazonaws.com/i/0ek13iysx7ewvmwq8hos.png)

Then, we need to write two functions that are practically identical save for one detail - one has to use `then` and the other has to use `async-await`. Take note of the carefully placed `console.log`s , as we will be tracking their appearances shortly.

![Fetch with .then()](https://dev-to-uploads.s3.amazonaws.com/i/kcvwu91rrynij5jkgnr7.png)

![Fetch with async-await](https://dev-to-uploads.s3.amazonaws.com/i/cppdbtrd73xktv0qt1na.png)


Towards the bottom of the file, I added two additional `console.log`s wrapped around my invocation of the aforementioned function, I run both separately like so:

![Code snippet of how I call each function separately](https://dev-to-uploads.s3.amazonaws.com/i/tf4kofma9xrt1gsy414s.png)

___

Before you read further, what order will the `console.log`s come out in? Do take into account the `console.log`s within the function definition themselves too...

The results!

![Output of console.logs after running function with .then()](https://dev-to-uploads.s3.amazonaws.com/i/dqss5vnhqmi6ikiadaen.png)

Notice how `then` runs through the entire function and then continues the execution after the function invocation before returning back to the function to perform the series of `then` operations after the `Promise` was resolved?

![Output of console.logs after running function with async-await](https://dev-to-uploads.s3.amazonaws.com/i/278b7kswgxjlk9lpxfn9.png)

Contrasting this with Async/Await, the function halts execution within the function scope continues to execute other tasks that follow its invocation before stepping back into the promise upon its resolution; this behavior will continue until all Promises are resolved.

Pan Wangperawong, quoted below, summarizes the differences succinctly in [his blog post](https://dev.to/pan/when-to-use-async-await-vs-then-with-promises-1gb7), which I encourage you to check out if you'd like more context.

### `async-await`

> Useful to use if your code works with Promises and needs to execute sequentially. Due to blocking, you might lose some ability to process code in parallel. I've primarily used async-await when making API requests.  —Pan Wangperawong

### `then`

> If you develop your frontend with React.js, a typical use case might be to display a loading screen until a fetch request returns and then using a setState to update the UI. —Pan Wangperawong