如何优化组合多个 axios 响应

Question

我正在使用 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 }

有更好的方法吗？

Answer 1

看起来不错。

你可以改变这个

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

Answer 2

您是否使用 thunk 中间件在 Redux 中进行异步调用？我不想假设你是，但这似乎是一个很好的基本方法。

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

好的。所以现在requestOne.data 有发出axios get 请求的结果。或者，如果 thunk 创建者是异步的并且代码是 const requestOne = await axios.get(API1);

是否需要从 request___.data 进一步解析数据？

如果没有，你可以拥有

const dataObj1 = { response1: requestOne.data, response2: requestTwo.data }
const dataObj2 = { ... dataObject1, response3: requestThree.data };

完整答案：

// store/yourFile.js code
export const YourThunkCreator = () => async dispatch => {
  try {
    const const requestOne = await axios.get(API1);
    // other axios requests
    const dataObj1 = { response1: requestOne.data, response2: requestTwo.data }
    const dataObj2 = { ... dataObject1, response3: requestThree.data };
    // other code
    dispatch(// to Redux Store);
  } catch (error) {
    console.error(error);
  }