如何在 React 中使用帶有字符串數組的循環簡單地請求 axios.all？

Question

請先檢查我的代碼。

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
  })
}

我要做的是使用arr 的每個元素，制作每個項目的 url，並使用 axios.all 請求

我想我可以使用循環函數（例如 array.map 或其他方法）來簡化代碼。 我需要一些指導。 謝謝你。

Answer 1

你可以做這樣的事情。

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
  })
}