How run multiple fetch requests simultaneously

May 15, 2024

With Promise.all() you can make multiple fetch requests simultaneously.

const INVESTMENTS_API = 'https://api.example.com/investments'
const BILLS_API = 'https://api.example.com/bills'

const fetchData = async (url: string) => {
  const response = await fetch(url)
  return response.json()
}

const getData = async () => {
  try {
    // Start fetching both URLs simultaneously using Promise.all()
    const [investments, bills] = await Promise.all([
      fetchData(INVESTMENTS_API),
      fetchData(BILLS_API)
    ])

    console.log('investments:', investments)
    console.log('bills:', bills)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

void getData()

The data from the requests is then available in the order they were passed to Promise.all(), which we can then process further as needed.