PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] How to optimally combine multiple axios responses

 October 13, 2022     axios, javascript, reactjs     No comments   

Issue

I am working with a React app. I have to create 2 objects using responses from 3 different APIs. For example:

  1. DataObject1 will be created using API1 and API2
  2. DataObject2 will be created using API1, API2, and API3

So, I am thinking about what would be the most optimal way of doing this by making sure 1 call each API only once.

I was thinking this:

const requestOne = axios.get(API1);
const requestTwo = axios.get(API2);
const requestThree = axios.get(API3);

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  const dataObject1 = createDataObject1(responses[0], responses[1]);
  const dataObject2 = createDataObject2(responses[0], responses[1], responses[2]);
  // use/access the results 
})).catch(errors => {
  // react on errors.
})

const createDataObject1 = (response1, response2) => { //Combine required data and return dataObject1 }
const createDataObject2 = (response1, response2, response3) => { //Combine required data and return dataObject2 }

Is there a better way of doing this?


Solution

Looks fine.

You can change this

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  const dataObject1 = createDataObject1(responses[0], responses[1]);
  const dataObject2 = createDataObject2(responses[0], responses[1], responses[2]);
  // use/access the results 
})).catch(errors => {
  // react on errors.
})

to

axios.all([requestOne, requestTwo, requestThree]).then((response) => {
  const dataObject1 = createDataObject1(responses[0], responses[1]);
  const dataObject2 = createDataObject2(responses[0], responses[1], responses[2]);
  // use/access the results 
}).catch(errors => {
  // react on errors.
})

because it is unnecessary to spread and rest.

If you don't want to use them like responses[0], responses[1], etc then you can use:

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((response1, response2, response3) => {
  const dataObject1 = createDataObject1(response1, response2);
  const dataObject2 = createDataObject2(response1, response2,response3);
  // use/access the results 
})).catch(errors => {
  // react on errors.
})


Answered By - Ramesh Reddy
Answer Checked By - Robin (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing