首页 > 在redux 中,通过中间件,循环执行多个ajax,如何确保回调结果是按照顺序来的

在redux 中,通过中间件,循环执行多个ajax,如何确保回调结果是按照顺序来的

最近在用react+redux开发webapp,其中在处理ajax这块,一直存在疑惑。
需求是:

其中采用标准fetch发送ajax,异步采用redux-thunk 处理异步promise。
middleware :

在组件A中。循环props.发送请求:

然后通过componentWillReceiveProps 获取ajax 的回调:

现在问题,setSate的结果是ajax回调的最后一次结果,最终渲染的列表都是最后一个ajax返回的那个值,不是对应的每个item的值。

不知道大家写redux的时候是怎么处理这种情况的。感觉redux在处理多个ajax请求的时候比较蛋疼,不像传统的写法,循环后,异步回调后,就是对应的每一步的结果了。

求教!


里面的promise.then建议改成Promise.all().then


这个应该通过action来解决。

我想你的场景是这样的,获取数据集合ListA,针对集合中的每一项发送请求获取更多数据,组成集合ListB。
ListB才是view真正想要的数据。

针对这种情况,action中应该像下面的这样
假设有一个fetchData的async action,他的payload是个promise,那剩下的其实都是对promise的处理了。
伪代码

// action
fetchData = (dispatch) => dispatch({payload: fetchListA.then(fetchMore)})

// promise
fetchListA = () => fetch(...)

// more是个数组,包含每个item的更多信息
fetchMore = (listA) => Promise.all(listA.map(item => fetchItem(item)))
                              .then(more => merge(listA, more))

fetchItem = (item) => fetch(...)

merge = (list, more) => {...}

如果有必要,获取ListA和更多信息都可以作成独立action进行dispatch

【热门文章】
【热门文章】