Streamlining Data Fetching From Multiple External APIs in JavaScript

Learn how to efficiently make parallel HTTP requests to external APIs using modern JavaScript features

Photo by Alex wong on Unsplash

When building applications that rely on third-party services, interacting with various external APIs becomes inevitable. Often, you may find yourself needing to collect data from more than one source. Managing individual request cycles can be tedious and time-consuming. Thankfully, JavaScript offers powerful tools to tackle such challenges effortlessly. Let’s explore how to loop through external APIs in JavaScript.

We will walk through an example where we gather weather information and currency exchange rates from multiple sources concurrently. First, install Axios, a popular package for making HTTP requests:

npm install axios

Next, import Axios in your project:

import axios from 'axios';

For our demonstration, assume we have two hypothetical RESTful APIs: OpenWeatherMap (weather info) and ExchangeRate-API (currency conversion). You must sign up for free keys beforehand since both require authentication. Replace <YOUR_OPENWEATHERMAP_KEY> and <YOUR_EXCHANGERATE_API_KEY> accordingly:

const openWeatherMapApiKey…