Question

我有一个反应函数，如下所示：

const requestSideBarData = (state, request) => {

    let newState = state;
    Object.keys(newState.data).forEach(element => {
         axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`,request)
        .then(response => {
            newState.data[element] = response.data;
        })
        .catch(e => {
            console.log(e);
            
        });
    });
    return newState;

};

我想在收到所有帖子响应并且更新了newState之后返回newState。我应该怎么做？由于该功能同步运行，因此它返回相同的状态，而无需让axios完成其响应。

Answer 1

使用Promise.all

1.0000000001

Answer 2

尝试一下

const requestSideBarData = async (state, request) => {
  let newState = state;
  for(let element in Object.keys(newState.data)) {
    try {
      let response = await 
        axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`,request);
      newState.data[element] = response.data;
    } catch(e) {
      console.log(e);
    }
  }
  return newState;
};

现在您已宣布requestSideBarData主体为异步主体，它将自动返回一个诺言，并且在调用该函数时需要对其进行处理。

我还用forEach替换了for...in循环，因为默认情况下forEach循环无法异步运行。现在，在每个迭代循环中，将await {xios.post。

理想情况下，如果有很多await函数，则不应在每个async函数上使用await。请参见William Wang的答案，以异步方式发出所有请求，并一次function MyComponent = () => { const [state, setState] = useState() }一次处理所有请求。

Answer 3

您可以执行以下操作。

const requestSideBarData = (state, request) => {
    let newState = state;
    try {    
        Object.keys(newState.data).forEach(async (element) => {
        const url =`${ApiEndPoints.getDropDownHeaders}${element}`;

        cosnt {data} = await axios.post(url,request);
        newState.data[element] = data;
        } catch(e) {
            console.log(e);
        }
    });
    return newState;
};

ReactJS：如何在循环获取数据后异步返回对象？

3 个答案: