Redux-thunk 和 axios - 请求取消答案

【问题标题】：Redux-thunk and axios - request cancellationRedux-thunk 和 axios - 请求取消
【发布时间】：2018-12-02 20:33:49
【问题描述】：

我有一个带有redux-thunk、redux-pack 和axios 的应用。

我的操作如下所示：

export const getEntities = () => (dispatch, getState, { api }) => {
  return dispatch({
    type: ENTITIES_LOAD,
    promise: api.getEntities(),
    meta: {},
  });
};

我给他们打电话componentDidMount。

我的问题是 - 取消这些操作以及请求本身的最佳方式是什么？我读过axios 使用的Cancel Token，但是我应该如何先取消该操作？

【问题讨论】：

这在默认情况下基本上是不可能的。看看 RxJS。

标签： javascript reactjs redux axios redux-thunk

【解决方案1】：

我发现自己使用取消令牌取消了请求。解决这个问题的一种方法，但我将它们附加到一个全局变量（如window），所以每次发出请求时，都会将新令牌添加到一个对象（使用它自己的密钥），并且每次一个请求完成，这个键被删除。

所以我在应用程序的客户端部分有这样的东西：

window.cancellationTokens = { myOwnTokenKey: theActualToken }

如果需要取消请求（例如，用户离开在componentDidMount 上获取数据的路由），我会这样做：

cancelRequest(nameOfTheKey);

名为cancelRequest 的函数接受一个参数，即请求的实际键，如下所示：

const cancelRequest = (keyName) => {
    if (typeof window === 'undefined') return;
    const cancelMethod = window.cancellationTokens[keyName];
    if (!cancelMethod) return;
    cancelMethod();
}

【讨论】：

【解决方案2】：

也许你应该考虑添加 redux-saga，让取消动作变得容易。请参阅文档https://redux-saga.js.org/

【讨论】：