Modern JavaScript for React: Promises and Async/Await – Part 7

When you need to work with asynchronous operations, you usually have to deal with promise objects. A promise is an object that might deliver data at a later point in the program.

Below is an example of an async function that returns a promise. The web fetch API, that’s natively available in some browsers.

 
const fetchdata = () =>; {
      fetch('https://api.github.com/').then(resp =>; {
            resp.json().then(data =>; {
                 console.log(data);
           });
      });
 };

fetchdata();
 

Here we’re fetching information from the top-level GitHub API. Since fetch returns a promise, to consume that promise, we do a then() call on the result of fetch and supply a callback function.

This callback function will receive the data from the API. The fetch API has a raw response.

If you need to parse the data as JSON, you need to call the JSON method on the response object, and that json() method is also an asynchronous one, so it returns a promise as well.

To get the data, we need another then() call on the result of the json() method, and in the callback of that, we can access the data.

As you can see, this syntax might get complicated with more nesting of asynchronous operations or when we need to combine this with any looping logic.

You can simplify the nesting here by making each promise callback return the promise object, but the whole then() syntax is a bit less readable than the modern way to consume promises in JavaScript, which is using async /await.

Javascript Async/Await Example

 
 const fetchdata = async () => {

     const resp = await fetch('https://api.github.com/');
     
     const data = await resp.json();

     console.log(data);
  }

fetchdata();
 

You just await on the asynchronous call that returns a promise, and that will give you back the response object. Then you can await on the json() method to access the JSON data.

To make these await calls, you need to label the function as async, and this will work exactly the same.

The async/await syntax is just a way for us to consume promises without having to nest then() calls. It’s a bit simpler to read.

keep in mind that once you await on anything, in a function like fetchdata() here, this function itself becomes asynchronous, and it will return a promise object.

See the output here.

Hope you have learned how async/await works in JavaScript.