CODEWITHSUNDEEP
javascriptpromiseaxios
Alwaysblue
Alwaysblue

Reputation: 11830

Promise All with Axios

I just read an Article related to promise and was unable to comprehend how we can do multiple API call using Axios via Promise.all

So consider there are 3 URL, lets call it something like this 

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"

And an array in which we will store Value 

  let promiseArray = []

Now, I want to run this in parallel (Promise.all), but I am unable to figure our how will we do it? Because axios have a promise in itself (or at-least that's how I have used it).

axios.get(URL).then((response) => {
}).catch((error) => {
})

Question: Can someone please tell me how we can we send multiple request using promise.all and axios

Upvotes: 76

Views: 143817

Answers (8)

antelove
antelove

Reputation: 3348

// using axios return
const promise0 = axios.get( url )
  .then( function( response ) {
    return response
  } )

// using function new promise
function promise1() {
  return new Promise( ( resolve, reject ) => {
    const promise1 = axios.get( url )
      .then( function( response ) {
        return response
      } )    
    resolve( promise1 )  
  ) }
}

Promise.all( [promise0, promise1()] ).then( function(results) {
  console.log(results[0]);
  console.log(results[1]);
});

Upvotes: 0

norbekoff
norbekoff

Reputation: 1965

Use Promise.allSettled which is almost same as Promise.all but it doesn't reject as a whole if any promise rejects. Promise.allSettled just waits for all promises to settle, regardless of the result.

const [ first, second, third ] = await Promise.allSettled([
  fetch('https://jsonplaceholder.typicode.com/todos/'),
  fetch('https://jsonplaceholder.typicode.com/todos/'),
  fetch('https://jsonplaceholder.typicodecomtodos')
])

// P.S: you can replace fetch with axios

The resulting array has:

  • { status:"fulfilled", value:result } for successful responses
  • { status:"rejected", reason:error } for errors.

enter image description here

Upvotes: 11

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

fetchData(URL) function makes a network request and returns promise object with pending status.

Promise.all will wait till all promises are resolved or any promise is rejected. It returns a promise and resolve with array of responses.

let URLs= ["https://jsonplaceholder.typicode.com/posts/1", "https://jsonplaceholder.typicode.com/posts/2", "https://jsonplaceholder.typicode.com/posts/3"]

function getAllData(URLs){
  return Promise.all(URLs.map(fetchData));
}

function fetchData(URL) {
  return axios
    .get(URL)
    .then(function(response) {
      return {
        success: true,
        data: response.data
      };
    })
    .catch(function(error) {
      return { success: false };
    });
}

getAllData(URLs).then(resp=>{console.log(resp)}).catch(e=>{console.log(e)})
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Upvotes: 29

Trouble106
Trouble106

Reputation: 99

Hope this may help

var axios = require('axios');
var url1 = axios.get('https://www.something.com').then(function(response){
    console.log(response.data)
  })
var url2 = axios.get('https://www.something2.com').then(function(response){
    console.log(response.data)
  })
var url3 = axios.get('https://www.something3.com').then(function(response){
    console.log(response.data)
  })

Promise.all([url1, url2, url3]).then(function(values){
  return values
}).catch(function(err){
  console.log(err);
})

Upvotes: 8

Tu Nguyen
Tu Nguyen

Reputation: 10179

The axios.get() method will return a promise.

The Promise.all() requires an array of promises. For example:

Promise.all([promise1, promise2, promise3])

Well then...

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"

const promise1 = axios.get(URL1);
const promise2 = axios.get(URL2);
const promise3 = axios.get(URL3);

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

You might wonder how the response value of Promise.all() looks like. Well then, you could easily figure it out yourself by taking a quick look at this example:

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Upvotes: 124

Tiisetso Tjabane
Tiisetso Tjabane

Reputation: 2106

Just to add to the approved answer axios also has its of Promise.all in the form axios.all it expects a list of promises and returns an array of responses.

let randomPromise = Promise.resolve(200);
axios.all([
    axios.get('http://some_url'),
    axios.get('http://another_url'),
    randomPromise
  ])
  .then((responses)=>{
    console.log(responses)
  })

Upvotes: 9

Tareq
Tareq

Reputation: 5363

You still can use promise.all with array of promises passed to it and then wait for all of them to be resolved or one of them gets rejected.

let URL1 = "https://www.something.com";
let URL2 = "https://www.something1.com";
let URL3 = "https://www.something2.com";


const fetchURL = (url) => axios.get(url);

const promiseArray = [URL1, URL2, URL3].map(fetchURL);

Promise.all(promiseArray)
.then((data) => {
  data[0]; // first promise resolved 
  data[1];// second promise resolved 
})
.catch((err) => {
});

Upvotes: 13

sol404
sol404

Reputation: 1733

Something like this should work:

const axios = require('axios');
function makeRequestsFromArray(arr) {
    let index = 0;
    function request() {
        return axios.get('http://localhost:3000/api/' + index).then(() => {
            index++;
            if (index >= arr.length) {
                return 'done'
            }
            return request();
        });

    }
    return request();
}

makeRequestsFromArray([0, 1, 2]);

Upvotes: 2

Related Questions