Question

我有一个带有redux-thunk，redux-pack和axios的应用程序。

我的动作如下：

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

我用componentDidMount称呼他们。

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

Answer 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();
}

Answer 2

也许您应该考虑添加redux-saga，使取消操作变得容易。参见文档https://redux-saga.js.org/

Redux-thunk和axios-请求取消

2 个答案: