Axios Concurrent HTTP Requests Syntax

Executing concurrent HTTP requests in Axios allows developers to fetch data from multiple endpoints simultaneously, reducing overall latency and improving application performance. This guide demonstrates the primary syntax options for handling parallel requests in Axios using modern standard JavaScript Promise.all(), the legacy axios.all() method, and resilient handling using Promise.allSettled().

1. Modern Syntax: Using Promise.all()

The standard and modern approach to executing concurrent requests with Axios is using the native ES6 Promise.all() method alongside async/await.

import axios from 'axios';

async function fetchConcurrentData() {
  try {
    const [usersResponse, postsResponse] = await Promise.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/posts')
    ]);

    console.log('Users:', usersResponse.data);
    console.log('Posts:', postsResponse.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchConcurrentData();

If any single request fails, Promise.all() immediately rejects, and control moves to the catch block.

2. Legacy Syntax: Using axios.all() and axios.spread()

Earlier versions of Axios provided dedicated helper functions: axios.all() and axios.spread(). While Promise.all() is now preferred, this syntax remains common in older codebases.

import axios from 'axios';

function fetchLegacyData() {
  const requestUsers = axios.get('https://api.example.com/users');
  const requestPosts = axios.get('https://api.example.com/posts');

  axios.all([requestUsers, requestPosts])
    .then(
      axios.spread((usersResponse, postsResponse) => {
        console.log('Users:', usersResponse.data);
        console.log('Posts:', postsResponse.data);
      })
    )
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
}

fetchLegacyData();

3. Resilient Requests: Using Promise.allSettled()

When you need all requests to execute regardless of whether some succeed or fail, use Promise.allSettled().

import axios from 'axios';

async function fetchResilientData() {
  const results = await Promise.allSettled([
    axios.get('https://api.example.com/users'),
    axios.get('https://api.example.com/invalid-endpoint')
  ]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Request ${index} succeeded:`, result.value.data);
    } else {
      console.error(`Request ${index} failed:`, result.reason.message);
    }
  });
}

fetchResilientData();