How can I simply request axios.all using loop with array of strings in React?

Question

Please check my code first.

const arr = ['liver', 'heart', 'brain']

const url1 = `www.hospital.com/diseaseName?liver`
const url2 = `www.hospital.com/diseaseName?heart`
const url3 = `www.hospital.com/diseaseName?brain`

const request1 = axios.get(url1)
const request2 = axios.get(url2)
const request3 = axios.get(url3)

const fetchData = () => {
  axios.all( [request1, request2, request3] )
  .then(axios.spread((...response) => {
  const responseOne = response[0].data
  const responseTwo = response[1].data
  const responseThree = response[2].data
  })
}

What I'm trying to do is using the every element of arr, making each item's url, and request using axios.all

I think I can simplify the code using loop function such as array.map or other methods. I need some guidance. Thank you.

Tirth Trivedi · Accepted Answer · 2022-05-20 14:17:43Z

1

You can do something like this.

const URL = 'www.hospital.com/diseaseName';
const arr = ['liver', 'heart', 'brain'];


const requests = arr.map((a) => {
return axios.get(URL + '?' + a);
});


const fetchData = () => {
  axios.all( requests )
  .then(axios.spread((...response) => {
  const responseOne = response[0].data
  const responseTwo = response[1].data
  const responseThree = response[2].data
  })
}

answered May 20, 2022 at 14:17

Tirth Trivedi

1351 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aden Lee Over a year ago

Thank you so much Tirth, I almost spend two hours figuring it out.

Tirth Trivedi Over a year ago

No problem @Aden Lee

Collectives™ on Stack Overflow

How can I simply request axios.all using loop with array of strings in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related