小编典典

使用redux-thunk取消先前的异步操作

reactjs

我正在使用redux-thunk中间件构建React /
Redux应用程序来创建和处理Ajax请求。我有一个经常被解雇的特殊的thunk,我想在解雇一个新的请求之前取消任何先前启动的Ajax请求。这可能吗?


阅读 359

收藏
2020-07-22

共1个答案

小编典典

一种方法是通过给它们随机的ID并在处理结果之前检查其状态,将这些请求标记为已取消。

这样做的方法是在第一次调度中(在thunk中)为此调用分配随机id,并在处理结果之前在reducer中对其进行检查。

const actionId = Math.random();
dispatch({type: AJAX_LOAD_CONST, id:actionId })

当您想取消所有请求时

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

当您要处理结果时,请不要忘记发送您自己的ID

在减速器中有这样的东西:

function reducer(state = initialState, action) {
  switch (action.type) {
    case actions.AJAX_LOAD_CONST:
      return Object.assign({}, state, { ajax: state.ajax.concat(action.id) });
    case actions.CANCEL_ALL_AJAX:
      return Object.assign({}, state, { ajax: [] });
    case actions.HANDLE_AJAX_RESPONSE:
      if (state.ajax.includes(action.id) {
        //return state reduced with action.results here
      }
      return state;
  }
}

如果使用XMLHttpRequest或其包装之一(JQuery?),则还可以自己存储请求并调用request.abort()。如果您使用新的提取API,那么您就不会感到奢侈,因为Promise缺少这种行为。

2020-07-22