How I Solved My async await vs .then Syntax Confusion.
Tags: webdev, javascript, api
Published: 2023-01-13 16:47:33

When I first started studying promises in asynchronous JavaScript, I used to be confused about the `.then` syntax and the `async` `await`, I was like "NOT AGAIN!!!", how am I supposed to memorize all that syntax!!??. 

But then, coding shouldn't be about memorizing, it should be about understanding concepts where they apply.

So now I want to break it all down for the layman so that he doesn't get discouraged by all that syntax.

## Assume You Have Two Functions, A and B

A.
```javascript
async function getData(){

let respObj=await fetch(URL)

let jsonData=await respObj.json()

console.log(jsonData)

}

getData()

```
B.
```javascript
function getData(){

fetch(URL)

.then((respObj)=>{respObj.json()})

.then((jsonData)=>{console.log(jsonData)})

}

getData()
```
The above are the same function written in different ways. What we have is an asynchronous function using the `fetch` method to get `JSON` data from an API endpoint. If there is one thing we know about the fetch API, it is that, it returns a promise and one thing about promises is that they cause expectations, which if not fulfilled come with disappointments.

A promise arrives as a response object, imagine the car you were promised for xmas.Only when and if you get your car can you be sure of driving it into the new year or if you'll be disappointed in whoever didn't fulfill their promise to you.

Now let us analyse the "then" keyword used in the "B" function above. According to the dictionary definition from Oxford languages,"then" could mean any of the following : after that, next, afterwards or therefore. Looking back at the above definition we can see that the word "then" is a reaction or consequence of an occurrence. Analysing the "A" function, the word "await" means to wait for, anticipate or expect.

### Now Let Us Juxtapose A and B 

1A. When using async await:

```javascript
async function getData()
```
 Makes a function return a promise.


1B. When using `.then`:

```javascript
function getData ()
```

Now at this point in both functions, we are ready to use our `fetch(URL)` which brings our promise in the form of a response object. As we know gifts come in wrappers and ribbons,same way our response object with many properties is the API wrapper for `jsonData`.


2A. When using `async` `await`:

```javascript
const respObj=await fetch(URL)
```

This means wait for the fetch to bring our promise which comes as a response object which we save in a variable `respObj`. Only with the response can we proceed to our next action.


2B. When using .then:

```javascript
fetch(URL).then((respObj)=>respObj.json())
```

This means until our promise comes as a response object, then only can we do something with the json data.

3. Object has arrived in form of json data.lets log it on to view.

A. When using await:
```javascript
let jsonData=await respObj.json()

Console.log(jsonData)
```

B. When using .then:
```javascript
.then((jsonData)=>console.log(jsonData))

```

Subsequently we can include a `try` `catch` for errors in `async` `await` and a `catch` for errors in `.then`. As you know when promises are not fulfilled, you just might need someone to catch your broken heart.

So for the two functions re-written with space for disappointments.

A.
```javascript
function getData(){

fetch(URL)

.then((respObj)=>{respObj.json()})

.then((jsonData)=>{console.log(jsonData)})

//catch incase it's not fulfilled

.catch((error)=>{console.log(error)})

}

getData()
```

B.
```javascript
async function getData(){

try{

let respObj=await fetch(URL)

let jsonData=await respObj.json()

console.log(jsonData)

}

catch(error){

console.log(error)

}

}

getData()
```