在thunk&#ddid异步请求中阻塞

时间:2017-05-31 21:00:43

标签: reactjs react-redux axios redux-thunk

我有一个提交处理程序触发一个动作创建者在reactjs中发出异步请求:

handleTimeSubmit = () => {
  // ...
  this.props.emitTimeRequest(arg1, guid);
  // setInterval should go here after checking response
}

动作创建者应该收到202和一个轮询位置,然后执行:

export function emitTimeRequest(arg1, guid) {
  const URI = '/someplace';
  var config = {
    headers: {'X-Request-ID': guid}
  };
  return function (dispatch) {
    axios.post(URI, arg1, config)
    .then((response) => {
      if ( response.status === 202 ) {
        var timeID = setInterval(() => {
          dispatch(emitCheckTimeStatus(response.headers['content-location']));
        }, 1000);
        return {
          type: EMIT_TIME_SLICE_REQ_OK,
          payload: timeID
        }
      } else {
        dispatch(emitTxRxAlert("red", "server timeslice error " + response.status));
        return {
          type: EMIT_TIME_SLICE_REQ_NA,
          payload: response.status
        }
      }
    })
  };
}

但是setInterval不属于动作创建者(我在控制台中收到很多警告)。如果我将它放在提交处理程序中,则动作创建器函数会在从服务器收到响应之前将控制权返回给调用者,并且我不想在提交处理程序中放置一些kludgy计时器以强制它等待。比赛条件。

有没有办法强制动作创建者(上面emitTimeRequest)阻止直到它收到202? setInterval应该在哪里实施?

一切正常,emitCheckTimeStatus完成工作并清除timeID

1 个答案:

答案 0 :(得分:0)

将相关组件的所有计时器逻辑移至componentWillMount()。全部设定。