Back to all guides

Fetch data from multiple endpoints with the Fetch API

APIFetch

•

Fri Mar 31 2023

•

4 min read

Ushna Ijaz

Ushna Ijaz

If you're working with APIs that require data from multiple sources, you may struggle with fetching data from different endpoints using the Fetch API.

In this guide, we'll take a deep dive into the Fetch API and show you how to fetch data from multiple endpoints easily.

Basic Usage of the Fetch API

The Fetch API is a modern, web-based API that easily fetches resources asynchronously across the network.

To make a basic fetch request, you simply need to pass the URL of the resource you want to fetch to the fetch() method. The fetch() method returns a Promise that resolves to the Response object representing the resource you fetched. Here's an example:

js
fetch('https://example.com/api/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

Fetching Data from Multiple Endpoints

Fetching data from multiple endpoints is a common requirement when working with API. You can gather information from various sources and merge it into a single result set.

Chaining multiple fetch requests

One way to fetch data from multiple endpoints is by chaining multiple fetch requests together. In this approach, you make a fetch request to the first endpoint and then use the response from that request to make another fetch request to the next endpoint. 

js
fetch('https://example.com/endpoint1')
  .then(response => {
    return response.json();
  })
  .then(data1 => {
    return fetch(`https://example.com/endpoint2?data=${data1}`);
  })
  .then(response => {
    return response.json();
  })
  .then(data2 => {
    console.log(data2);
  })
  .catch(error => {
    console.error(error);
  });

In this example, we're making a fetch request to https://example.com/endpoint1 and using the response data to construct a URL for the second fetch request to https://example.com/endpoint2. The response from the second request is then parsed as JSON and logged to the console.

Using Promises to handle multiple fetch requests

Another way to fetch data from multiple endpoints is by using Promises. In this approach, you create an array of Promises representing each fetch request and then use the Promise.all() method to wait for all the requests to complete before handling the responses. Here's an example:

js
const request1 = fetch('https://example.com/endpoint1').then(response => response.json());
const request2 = fetch('https://example.com/endpoint2').then(response => response.json());
Promise.all([request1, request2])
  .then(([data1, data2]) => {
    console.log(data1, data2);
  })
  .catch(error => {
    console.error(error);
  });

In this example, we're creating two Promises representing the fetch requests to https://example.com/endpoint1 and https://example.com/endpoint2, respectively. We then pass these Promises to the Promise.all() method waits for both requests to complete before resolving with an array of the response data. Finally, we log the response data to the console.

Usage

Let's use the GeoDB Cities API from Rapid API Hub in this example. You can sign up and subscribe to use this API.

Loading component...

We’ll be using the request chaining method for this example. In this, we fetch data from the first endpoint using a single fetch call, then fetch data from the second endpoint in the then() block of the first fetch call using another fetch call. The data from each endpoint is then logged to the console.

html
<!DOCTYPE html>
<html>
<head>
  <title>Fetch API Example</title>
</head>
<body>
  <h1>Fetching Data from Multiple Endpoints</h1>
  
  <script>
    // First endpoint to fetch data from
    const endpoint1 = 'https://wft-geo-db.p.rapidapi.com/v1/geo/countries';
    
    // Fetch data from first endpoint
    fetch(endpoint1, {
      headers: {
        'x-rapidapi-key': 'your-api-key',
        'x-rapidapi-host': 'wft-geo-db.p.rapidapi.com'
      }
    })
      .then(response => response.json())
      .then(data1 => {
        console.log(data1);
        
        // Second endpoint to fetch data from
        const endpoint2 = 'https://wft-geo-db.p.rapidapi.com/v1/geo/cities';
        
        // Fetch data from second endpoint
        return fetch(endpoint2, {
          headers: {
            'x-rapidapi-key':  'your-api-key',
            'x-rapidapi-host': 'wft-geo-db.p.rapidapi.com'
          }
        });
      })
      .then(response => response.json())
      .then(data2 => {
        console.log(data2);
      })
      .catch(error => console.error(error));
  </script>
</body>
</html>

Wrap up

Fetching data from multiple endpoints with the Fetch API can be very useful in many scenarios, especially in applications that require data from various sources. If you want to learn more about Fetch API, we have written a lot of guides on it that you can find here.

# chaining# fetch# multiple endpoints# promises