How I Solved My async await vs .then Syntax Confusion.

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.

async function getData(){

let respObj=await fetch(URL)

let jsonData=await respObj.json()

console.log(jsonData)

}

getData()

B.

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:

async function getData()

Makes a function return a promise.

1B. When using .then:

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:

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:

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.

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

A. When using await:

let jsonData=await respObj.json()

Console.log(jsonData)

B. When using .then:

.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.

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.

async function getData(){

try{

let respObj=await fetch(URL)

let jsonData=await respObj.json()

console.log(jsonData)

}

catch(error){

console.log(error)

}

}

getData()