JS :async code part2

Welcome, let’s continue. We will discover two keywords: async and await.

Those two are recently added to java script .their basic use is to chain promises in a readable and cleaner way.

When we used simple then and catch bloc, our code started to get messy when our code become bigger. So let’s started with putting our asynchronous code inside a function:

 

Our function has become an async function because we used the async keyword on it. You can do the same with normal function just put async before the parameter.

Then we use await. It‘s allowed only in asynchronous function.

const getTodos=async()=>{

    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1",{method:'GET'})

    const data = await response.json()

    console.log(data);

}

 

getTodos();

The ‘await’ tells the java script to not store the value of the promise until it finish. So that once the promise resolves the variable will take the value. It’s a cleaner way than using chained then.

 

const getTodos=async()=>{

    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1",{method:'GET'})

    const data = await response.json()

   console.log(data);

}

 

getTodos();

 

The result is an object containing the data.

So in conclusion, the variable won’t be assigned till the promise resolves. Cool no?😍

You may ask what if we return the data and assign it a variable?

Well , let’s see:

console.log(test) const getTodos=async()=>{

    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1",{method:'GET'})

    const data = await response.json()

return data;

}

 

const test = getTodos();

console.log(test)

 

 

And the result is  : Promise {<pending>}

But you lay ask, you told as that … 😧. 

Yes , true but this only works inside the asynchronous function . the other code will work in his own.so  when we output the test ,it’s still a promise.

Ok let’s fix it. It’s a promise ,try  to remember what we have learned in last article before you see solution.😉

 

 

Solution:

We simply use ‘then’. Yes we need to use it even if we are assigning the result from an asynchronous function.

 

const getTodos=async()=>{

    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1",{method:'GET'})

    const data = await response.json()

   return data;

}

 

getTodos()

.then(data=>console.log(data))

.catch(err=>console.log(err))

You can assign the test variable inside the then function if you want to conserve the data within a variable.

One last thing, it’s very useful to create a customized error throwing so when we work with chained promises, we don’t have to wait till the last one.

Code:

 const getTodos=async()=>{

    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1",{method:'GET'})

    if(response.status !==200)throw new Error("can't fetch the data");

    const data = await response.json()

   return data;

}

And that’s all folks. Stay curious and keep practicing.😁