How to Use the Fetch API in JavaScript

How to Use the Fetch API in JavaScript

Learn how to use the Fetch API to grab data from other resources
Ferenc Almasi β€’ 2022 March 29 β€’ Read time 7 min read
Learn how to use the Fetch API in JavaScript to grab data from other resources and use them inside JavaScript.
  • twitter
  • facebook
JavaScript

This lesson is a preview from our interactive course

When working with JavaScript, we will often come across the need to fetch some sort of data from a remote resource, such as a server. In this lesson, we are going to study the built-in Fetch API which was created for exactly this purpose: to help with fetching data in different ways.

The Fetch API is Promise-based, meaning it is an asynchronous operation. Whenever we request data from a server using it, it will return the value asynchronously, just as it takes some time to load any webpage in your browser. Let’s see how we can use it to create basic network requests.


Making Basic Requests

First, we are going to need an endpoint (a URL) which we want to fetch data from. For this purpose, we are going to use an online service called JSON placeholder where we can fetch mock JSON data for testing purposes. Mock data means that this data is fake and is only created for testing purposes. But what is JSON?

JSON

Whenever we are working with external resources, we will often come across JSON files. JSON stands for JavaScript Object Notation, and it is a lightweight data-interchange format that can be used not only by JavaScript but by other programming languages too. It is language-independent.

The format in this data is self-describing and easy to understand. It highly resembles JavaScript β€” hence the name β€” the only difference to regular JavaScript objects, is that keys are always represented as strings with double quotes. For example:

Copied to clipboard! Playground
{
    name: 'John',
    age: 30,
    married: true
}
Example for a JavaScript object
Copied to clipboard!
{
    "name": "John",
    "age": 30,
    "married": true
}
Example for the same data in JSON

Notice that for JSON, we need to write keys as strings. You must also use double quotes for strings. The rest of the structure remains the same. The most common way to share data is using JSON files. Now that this is out of the way, let’s get back to the Fetch API, and take a look at the mock data that we are going to fetch:

undefined
Install the JSON Viewer extension to enable syntax highlight for JSON files

This endpoint returns a list of fake todos, each having some properties. So how exactly we can access this data through JavaScript? Take a look at the following example:

Copied to clipboard!
fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(data => console.log(data));
Making a basic request with the built-in fetch API Execute code

First, we call the built-in fetch function, passing the endpoint as a parameter. Then β€” since it returns a Promise β€” we can call a then callback on this which will return the response, but then we need to call then a second time, as we need to convert the response into JSON using response.json. This will return the necessary data which we can log to the console. Of course, this can also be written using async/await in the following way:

Copied to clipboard! Playground
(async () => {
    const url = 'https://jsonplaceholder.typicode.com/todos';
    const response = await fetch(url);
    const data = await response.json();

    console.log(data);
})();
Using the fetch API with async/await Execute code

Now we get back the data in an array of objects, ready to be worked with in JavaScript.


Handling Responses

What happens if we have to deal with other types of data and not necessarily JSON? For example, let’s say we have to work with a text file. In this case, all we need to do is change response.json to response.text:

Copied to clipboard! Playground
(async () => {
    const url = '/course/data/example.txt';
    const response = await fetch(url);
    const data = await response.text();

    console.log(data);
})();
Working with a text file with fetch

Right-click on the page, and select "Inpect", or hit F12 on your keyboard to bring up DevTools, then copy-paste the above code into the console to execute it.

Note the URL is a relative URL pointing to this domain, so if you try to execute it inside the interactive widget, it won't work.

Of course, not every type of file has a different method available on the response object. For other types, we may want to use response.blob:

Copied to clipboard! Playground
(async () => {
    const url = '/course/data/webtips/js/1.png';
    const response = await fetch(url);
    const data = await response.blob();

    console.log(data);
})();
Use blob for images

Try to change the above example from blob to use text to see what is returned in case you are working with images, and you use the wrong format. Also if we  try to do the same but with json, we will get an error:

Copied to clipboard!
Uncaught SyntaxError: Unexpected token οΏ½ in JSON at position 0

This means that the JSON we are trying to fetch is invalid. In most cases, not a JSON in the first place. So how can we handle these cases?

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Handling Errors

To handle errors, we can use either a catch clause or a try-catch block, depending on whether we use async/await or not. Let’s see a catch clause first:

Copied to clipboard!
fetch('/course/data/webtips/js/1.png')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));
Handling fetch errors using a catch clause

This will prevent errors from breaking our application. To achieve the same thing using async/await, we can wrap the request and response into a try-catch block:

Copied to clipboard! Playground
(async () => {
    try {
        const url = '/course/data/webtips/js/1.png';
        const response = await fetch();
        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.log(error);
    }
})();
Handling fetch errors using a try-catch

There can be also cases when the URL and the type of the response are right, but we encounter an error while fetching. For example, it returns a 404. 404 is an HTTP status code for not found. It happens whenever we request a page that cannot be found. By default, if everything goes well, the status code is 200 - OK. Let’s see what happens when we request an URL that doesn’t exist:

Copied to clipboard! Playground
(async () => {
    try {
        const url = 'https://jsonplaceholder.typicode.com/invalid';
        const response = await fetch(url);
        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.log(error);
    }
})();
Getting a 404 when fetching Execute code

We get back a 404, with an error. This is not really descriptive and we don’t know what is really going on. Instead, what we can do, is introduce an extra if statement to check if the response came back OK:

Copied to clipboard! Playground
(async () => {
    try {
        const url = 'https://jsonplaceholder.typicode.com/invalid';
        const response = await fetch(url);
    
        if (response.ok) {
            const data = await response.json();
            console.log(data);
        } else {
            console.log(response.status);
        }
    } catch (error) {
        console.log(error);
    }
})();
Handling different HTTP errors Execute code

As we can see, the reponse object has a property called ok which is true if everything worked out. However, if there is an error, this becomes false and then we land in the else branch, in which case, we can display different error messages based on reponse.status. In the above example, its value will be 404.

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.