时间戳

首页 > 解决方案 > 如何优化组合多个 axios 响应

javascript - 如何优化组合多个 axios 响应

问题描述

我正在使用 React 应用程序。我必须使用来自 3 个不同 API 的响应创建 2 个对象。例如：

  1. DataObject1 将使用 API1 和 API2 创建
  2. DataObject2 将使用 API1、API2 和 API3 创建

因此，我正在考虑通过确保 1 只调用每个 API 一次来执行此操作的最佳方式。

我在想这个：

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 }

有没有更好的方法来做到这一点？

标签： javascriptreactjsaxios

解决方案

看起来不错。

你可以改变这个

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

到

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

因为传播和休息是多余的。

如果您不想像 , 等那样使用它们responses[0]，responses[1]那么您可以使用：

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

推荐阅读