Last updated: October 7, 2021.
Building a good-looking frontend is a common goal for early-stage frontend developers. But how do you take your builds to the next level by moving from static to dynamic content?
fetch() method helps you achieve this by retrieving information from servers (APIs) external to your frontend environment.
For demonstration purposes, this article will show you how to retrieve travel information from Travelbriefing.org. But the same technique may be used to retrieve almost any type of data (to get started, you may want to check out this list of free APIs provided by public-apis.io to see what is possible!).
Making a GET request to an API endpoint
To retrieve data from an API, you must make a
GET request to an API endpoint. Available API endpoints are usually provided on the website of the API provider.
In this article, we will request data from the travel information API provided by Travelbriefing.org. The following are listed by the publisher as available API endpoints:
API endpoint, which requires a country name (e.g. here the Netherlands):
As the list of countries is in
.json format it is viewable in a regular browser. We need to check this first as the API endpoint requires entry of a country name.
We could try and guess a country name, but the API expects this in a certain format or the
GET request will fail (e.g. should that be UnitedKingdom, GreatBritain or England?).
The list not only provides us with the expected country names, but also the full
url for each endpoint. Let’s now use
fetch() to request data about for the Netherlands. Of course, feel free to substitute this for a different country of interest!
url endpoints, but instead only an example request and lists for varying information.
Retrieving data with fetch()
fetch() allows us to easily retrieve data from a country endpoint by simply adding it as a parameter in a fetch request:
Running this code retrieves the data so we may now use it for our purposes. Simple, right?
But how do we access it? And what if something goes wrong with the request? (e.g. the request is mistyped, or the API server is down).
Making the data accessible
After…well, fetching, a
fetch() request returns something called a promise. The contents of a returned promise can be accessed using a special method:
.then(). This method must be included directly after
fetch() — i.e. no semi-colon after the
fetch() line, or it will not work!
Notice there is now a parameter included in the
.then() method called
res (short for ‘result’). It is convention to name this parameter
res but it is entirely arbitrary (we could call it something else and it would make no difference to the functionality).
.then() parameter is named, it now becomes the object containing the retrieved data. Let’s work with it to access that data now!
If we use
console.log() to inspect the
res object, we see that the body of the object (where the main data should appear) is something called a
.json() method to the
ReadableStream is in a format other than JSON. However, in cases where the
.json() method fails,
.text() is a popular alternative.
As a slight aside, be aware that it is possible to access the result of a promise using
.then(), do something to the result and then access the result of the first
.then() in a second
.then(). This passing down of the promise result can be continued indefinitely!
We only need to this once here, passing down the result of applying the
.json() method and receiving the result in a second
.then(). The result is again received in the parameter (whatever we choose to call it). We use
Making the data available in a new function
For working with the (now modified) result of our request, it is useful to make it available to us outside the
fetch() request and subsequent handling through the
To do this, let us create a separate function inside which we can program what we want to do with the result. Entirely arbitrarily, we call this
dataHandler() and add the parameter
inputData. We also add a
console.log() call to display the contents of the passed in
inputData parameter as a check that it is working.
With this, we have written a function capable of receiving the result from our fetch request. But we still need to modify the request itself to send its result to the function.
To do this, we need to modify the final
.then to send its result to the
dataHandler function. We do this by calling the function and passing the
res as the parameter — so now, when the function runs, the
data parameter will be taken by the modified
If we now view the
data parameter in the console log, we can see the data previously in
res outputted from within the
We are now in a position to extract the parts of the data we wish to use. We can do this by calling
data and adding dot notation to reach our properties of interest nested within the
data object. For example:
In a follow-up blog on July 19, I will show you how to use this data to build a full-fledged travel information app! We will cover the typical issues you may encounter along the way, such as how to build an app around a single country endpoint.
What is the request doesn’t work?
For a variety of reasons, a fetch request may fail. Perhaps the endpoint
url was mistyped. Or the API server is down.
To deal with a potential error, we can add the .catch() to the end of our .then() chain. This will ‘catch’ any errors that occur in our .then() chain (and not catch anything if it is succesful).
.catch only runs if an error is encountered somewhere in the chain.
Let’s trigger an alert for the user if our fetch request fails so they are not left in suspense. In this example, I have misspelled “Netherlands” as “Nethlands” so the alert will show when the code is run.
For our own trouble-shooting purposes, we can also log the error in the console.
.catch(), its parameter, like then, can be called anything. It is only convention to name the parameter err. It can be handled in exactly the same way as a result inside of a
It is optional to deal with errors. However, it is good practice, as otherwise you may leave your users hanging!
Happy fetch() -ing
This article showed you how to make a fetch() request to an external API, make the data available in a new function and how to deal with an error.
Have an itch to fetch now? Check out this list of free APIs from public-apis.io to start making using of fetch() in your project.