🚀 Mastering Asynchronous JavaScript: Choosing Between .then() and async/await
Tags: node, react, javascript, typescript
Published: 2023-09-18 09:15:31

1. 
Promise can be consumed from one of two ways:
1. `then` (Introduced with promises)
2. `async/await` (Introduced in later years)

We basically learned that consuming promises has better code readability after the introduction of `async/await`, whether it be an API call, database operation, reading a file from your filesystem or any async task.

Read more about it here:
{% embed https://dev.to/shameel/callback-callback-hell-promise-chaining-and-asyncawait-in-javascript-120i %}

Lets look at the example of consumption of promise with `then` and `await`:

```js
const shameelPromise = new Promise((resolve) =>
  setTimeout(() => resolve("Promise 1 resolved"), 1000)
);
```
### Consuming promise with then:

```js
shameelPromise.then((result) => {
  console.log("Using .then():", result);
}).catch((error) => {
  console.error("Using .then(): Promise rejected with error:", error);
});
```

### Consuming promise with async/await:
```js
async function consumePromise() {
  try {
    const result = await shameelPromise;
    console.log("Using async/await:", result);
  } catch (error) {
    console.error("Using async/await: Promise rejected with error:", error);
  }
}

consumePromise();
```
## Choosing Between .then() and await

### Choosing .then()

- Use `.then()` when you want to execute actions asynchronously without blocking the rest of the code. This is suitable when you want to handle a Promise's resolution or rejection while allowing other parts of your program to continue running.
- **This does not pause the execution of the code.**

Here's an example to illustrate this:
```js
console.log("-- Shameel 1 --");
const request1 = fetch("https://jsonplaceholder.typicode.com/users/1").then(
  (response) => response.json()
);
const request2 = fetch("https://jsonplaceholder.typicode.com/users/2").then(
  (response) => response.json()
);

Promise.all([request1, request2])
  .then(([data1, data2]) => {
    // Both responses are available here
    console.log("Data from request 1:", data1?.id);
    console.log("Data from request 2:", data2?.id);
  })
  .catch((error) => {
    console.error("Error:", error);
  });
console.log("-- Shameel 2 --");
// Code here continues executing without waiting for the responses
```

In this code, we are sending concurrent API requests, not serial ones. You can read about serial vs. parallel API calling [here](https://dev.to/shameel/serial-vs-parallel-api-calling-in-javascript-3h3j)

After running above code, you will see a response like this:
```
-- Shameel 1 --
-- Shameel 2 --
Data from request 1: 1
Data from request 2: 2
```

You can see that `-- Shameel 1 --` and `-- Shameel 2--` appeared immediately because the code was not _paused_.

PS. if you want to know about `Promise.all()`, please have a look at this:
{% embed https://dev.to/shameel/javascript-promise-all-vs-allsettled-and-race-vs-any-3foj %}

### Choosing `await`
- Use await within an async function when you need to wait for a Promise to be resolved before proceeding with the rest of the code. This is helpful when you want to ensure that certain operations are completed before moving on.
- **This pauses the execution of the code.**

```js
async function fetchData() {
  try {
    const [response1, response2] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2')
    ]);

    const data1 = await response1.json();
    const data2 = await response2.json();

    // Both responses are available here
    console.log('Data from request 1:', data1);
    console.log('Data from request 2:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

// Code here continues executing after fetchData() is called
```

You will see a response like this:
```
-- Shameel 1 --
Data from request 1: 1
Data from request 2: 2
-- Shameel 2 --
```

You can see that `-- Shameel 2--` appeared after the requests were fetched successfully. This is because the code execution was _paused_.

## Conclusion
In JavaScript, Promises offer a way to manage asynchronous operations in a more organized and understandable manner. The combination of .then() and await provides developers with powerful tools for handling asynchronous tasks. By understanding when to use each approach, you can write cleaner and more efficient code while maintaining better control over the flow of your program. So whether you're handling network requests, file I/O, or any other asynchronous task, having a solid grasp of these concepts will undoubtedly elevate your JavaScript programming skills.

I hope you learned something from this :-)

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123