javascript - 如何确保所有使用 redux 的 promise 的正确顺序？

Question

我正在使用 redux(和 react )，我必须多次发出多个 api 请求。我正在使用 for 循环并 promise 所有。正在解决的订单 promise 是问题，因为订单是随机的 - 首先解决第二个 promise ，然后首先解决，然后是第三个而不是 1,2,3。 我做错了什么或者我该如何更改订单？另外，当我没有收到任何数据时，停止迭代的方法是什么？我将不得不迭代大约 25 次，但不想对其进行硬编码。我可以用我的收获来确定吗？非常感谢!

行动:

export const fetchData = () => {
    return dispatch => {
        const promises = [];

        dispatch({type: FETCHING_DATA})

        for (var i = 0; i < 3; i++) {
            const start = i === 0 ? 0 : (i + "01");
            let getData = axios.get(`${api_root_url}/v1/?start=${start}`)    
                .then(res => {
                    dispatch({type: FETCH_DATA_SUCESS, payload: res.data})
                })
                .catch(err => {
                    dispatch({type: FETCH_DATA_ERR, payload: err.data})
                })
            promises.push(getData)
        }
        return Promise.all(promises)    
    }
}

Answer 1

如果在解决 3 个请求时分派(dispatch)的操作顺序很重要，您可以尝试 2 件事:

在所有 3 个操作完成后发送操作:

export const fetchData = () => {
    return dispatch => {
        const promises = [];

        dispatch({type: FETCHING_DATA});
        Promise.all(
          [...new Array(3)].map((ignore,i)=>i === 0 ? 0 : (i + "01"))
          .map(
            start=>axios.get(`${api_root_url}/v1/?start=${start}`)
          )  
        ).then(
          results=>results.forEach(
            result=>
              dispatch({type: FETCH_DATA_SUCESS, payload: result.data})
            )
        ).catch(
          err => dispatch({type: FETCH_DATA_ERR, payload: err.data})
        );
        //not sure why you want to return something here
        //return Promise.all(promises)    
    }
}

或者保持代码不变，但在 dispatch({type: FETCH_DATA_SUCESS, payload: result.data}) 中添加已完成的请求，以便 reducer 知道在哪里更新状态。像 dispatch({type: FETCH_DATA_SUCESS, payload: {request_from:start,data:res.data}}) 和 catch 语句一样。