Async Await vs Fetch.Then()
Tags: javascript, beginners, programming
Published: 2023-06-28 18:13:30

   In my time preparing for my bootcamp, I decided to get some practice with some web development fundamentals. One of those being working with APIs and manipulating JSONs that were returned to me. In my journey to self-teach myself how to do fetch calls, I came across a method that used async functions and a keyword of `await`.

```javascript
const apiCall = async () => {
   const apiCallPromise  = await 
   fetch('https://api.example.com/data');
   const apiCallObj = await apiCallPromise.json();
   return apiCallObj;
};
```

   This snippet is a quick and easy function to make a simple fetch request and return the parsed JSON as a mutable object. What the code is doing in practice is making my `GET` request to the endpoint, telling the code to wait for a resolved promise, taking that promise and turning it into an object using the `.json()` function, and finally returning that object. This is simple, clean, and predictable code. You always know what object you will get back is, and if you pass in parameters, you can easily control which endpoint you hit on the API with string interpolation.

   When I began my bootcamp and started working my way through the course, I inevitably reached the chapter focused on JSONs and fetch, post, patch, delete etc. While going through this chapter I noticed we were taught another way of doing fetch requests. They weren't handle in async functions, they didn't use the `await` keyword, and they were linking callback functions to the initial fetch.

```javascript
const apiCall = () => {
   fetch('https://api.example.com/data')
   .then((resp) => resp.json)
   .then((data) => {
      return data;
   });
}
```
   Now that snippet looks much different from what I had learned. What is it doing exactly though? When invoked, the function will send my `GET` request to the target endpoint, it will _then_ (get it?) invoke the `then()` function which takes a callback function. In this example that call-back function is simply returning the object of the response after invoking `.json()` on it. After doing so `then()` will take that parsed object and do _something_ with it. That can be invoking another call back, changing the content of the object then, or simply returning it as my example does.

   So, what is the difference between these two methods for handling requests? Is one better than the other?

   There is three key differences between async `await` and `then()`. They boil down to syntax, error handling, and general code organization.

   The syntax differences between the two are shown above; however, there is more going on behind the scenes of the syntax. With `await`, we are able to write asynchronous code in a way that looks and feels synchronous. `await` is allowing us to pause code execution until our promise is resolved and then again while parsing the JSON we get back from that fulfillment. With `then()` we are promise chaining. We are saying after this, do this, and so on and so on. This is what is allowing us to asynchronously handle the request sent to the endpoint. This promise chaining is more explicit and allows us to handle that promise in multiple ways before returning it.

   The next difference is how these two methods handle errors. With `await` we are able to create a `try` and `catch` code block. 

```javascript
const apiCall = async () => {
   try{
      const apiCallPromise  = await 
      fetch('https://api.example.com/data');
   };
   const apiCallObj = await apiCallPromise.json();
   return apiCallObj;
   catch(error){
      console.error(error);
   };
};
```
   This code block is acting as an `if-else` but one designed for acting with requests. What this is doing is in the `try` if the requests is successful, continue on and return the object; otherwise, throw this error to the console and tell me the error with the requests. With `catch()`, your errors are handled in your promise chain just as your `then()`s are. 

```javascript
const apiCall = () => {
   fetch('https://api.example.com/data')
   .then((resp) => resp.json)
   .then((data) => {
      return data;
   });
   .catch((error) => console.error('Error:', error));
};
```

   This snippet functions exactly the same as done with the `await` example but the difference is that here, `catch()` is expecting a callback function.

   The third key difference between the `await` and `then()` comes down to code organization. I have touched on it already but using `await` allows you to write your code in a more linear and organized manner. You can perform subsequent operations on the fetched response immediately after the `await` statement, which can make the code flow more naturally. With `then()`, you need to chain multiple `then()` calls to handle the response and subsequent processing. This can sometimes lead to nested or cascading `then()` calls, which may make the code harder to read and maintain.

   So, which is better? I don't believe there is a definitive answer to this question. While I do have my preference in using `await`, I believe it comes down to the context of your application, use case, and preference.