Using Asynchronous JavaScript with Fetch

What Is Asynchronous JavaScript

Asynchronous is the opposite of synchronous, which in computing means executed in sequence. So asynchronous JavaScript means JavaScript that can be executed in parallel, where the steps can happen in any sequence.

If we have a routine where I do steps 1-2-3 in sequence, that takes 5 seconds every time, that's synchronous. If I send 10 messages and can expect a reply to each one somewhere between 3 seconds and 3 hours later, that's asynchronous.

This becomes important when dealing with JavaScript functions.

Normally the result of a JavaScript function can be calculated instantly: if I have the add_numbers function, and use it like add_numbers(5,7), I can get the answer - 12 - back by following a routine, in a set time.

For asynchronous JavaScript, you have to wait, for an unknown amount of time.

Examples of Asynchronous JavaScript

A good example of a time when you would need to wait would be when communicating with an API - say for sports data, or the weather.

In this case, I might want to define a constant, and then print that to the screen. The constant would receive the response of my API call.

I wouldn't know how long the function would take, so I would use an JavaScript function for this. The constant would be defined to be the result of that API call.

Keywords: Async and Await

Asynchronous functions in JavaScript use two keywords: the async keyword and the await keyword. They go together usually, although you can use async without await.

You declare the function using async, in the function definition.

You use await to receive the result of the function - in this example, an API call.

This result is called a promise; it is an object that holds the result of the asynchronous operation.

Fetch

Fetch is used to receive requests and responses from API calls.

You provide the options; fetch does the work and returns the result.

Normally you use fetch with one parameter, the URL to fetch, but you can pass a second parameter if you want more options. Here, we will only pass the URL.

The result of fetch is also a promise, like the result of await.

For this example I'll be using the Binance API to return cryptocurrency data.

The Binance API was chosen because it doesn't require authentication or anything extra (like an API key) from the developer.


import fetch from "node-fetch";

const getData = async () => {
  const url = "https://api2.binance.com/api/v3/ticker/24hr";
  console.log("Waiting...");
  const request = await fetch(url);
  const data = await request.json();
  return data;
};

getData().then(result => {
  console.log(result);
});
}

If you run this code as a node.js script by using the command node script.js, you'll see the result of this API call printed to the console.

While the exact data you fetch will depend on the day, you should see something like this:

{
    symbol: 'EXAMPLE',
    priceChange: '0.00000025',
    priceChangePercent: '0.001',
    weightedAvgPrice: '0.00008204',
    ....

Now you know how to use an async function with JavaScript and fetch through an API.

Try finding other API's, and adding this function to a webpage, to continue the learning process.