Multiple call of Axios.all requests from an array with multiple links-CodePudding

data1 is an array with 5 links from the below loop.

let data1 = [];
console.log(data1);

for (let Items of ItemsArray) {
  const row = {
    PricingSummary: Items.pricingOptionsSummaryUrl,
  }
  data1.push(row);
  };

I want to use this array to perform 5 times GET requests by using Axios.all.
After getting the response, I want to setState to map with the data I want.

const callprice = () => { //assign a variable for a call function
    Axios.all(data1.map(l => Axios.get(l)))
    .then(Axios.spread(function(...res) {
      // setStats(....)
      console.log(res); // Getting error message : xhr.js:210 GET http://localhost:3000/[object Object] 404 (Not Found)
    }));
};

I'm getting the localhost 404 (Not Found) errors. Believe the request array links are incorrect from the data1, but not sure how to make them correct.

Example of the console for the data1:

0: {PricingSummary: 'http://snapshot.dellsvc/snapshots/MXL5hLvzBkajQ-fqGTo9oA'}
1: {PricingSummary: 'http://snapshot.dellsvc/snapshots/3gmDYxoCg0m9YgWB3aLLpA'}
2: {PricingSummary: 'http://snapshot.dellsvc/snapshots/dEpCHAi3IUe1sTIqEo9Idw'}
3: {PricingSummary: 'http://snapshot.dellsvc/snapshots/SAIS_lcIxU202-Mnm5KLIQ'}
4: {PricingSummary: 'http://snapshot.dellsvc/snapshots/H_9txy3Ejkm-zoe49Hbkzg'}
5: {PricingSummary: undefined}

CodePudding user response：

First, axios.all() and axios.spread() are both deprecated. You should use Promise.all() or Promise.allSettled() instead.

Second, it seems at least one of your URLs is undefined which definitely won't work in a request. You may want to filter out these problem records.

Third, you're pushing objects with a PricingSummary property into data1. These cannot be used in axios.get() since it expects a URL string, not an object. This is where your [object Object] is coming from.

const callprice = async () => {
  const responses = await Promise.all(
    ItemsArray
      .filter(item => item.pricingOptionsSummaryUrl) // remove falsy values
      .map(async (item) => (await axios.get(item.pricingOptionsSummaryUrl)).data) 
  )

  // now `responses` is an array of the response data
}

CodePudding user response：

You shoud use Promise.allSettled instead