如何取消 RTK-Query 请求答案

【问题标题】：How to cancel the RTK-Query requests如何取消 RTK-Query 请求
【发布时间】：2022-10-05 20:23:27
【问题描述】：

我正在使用 RTK 查询来处理我的请求。但我在取消请求时遇到问题。

场景是这样的，我有一个模式来显示一个表单来添加一个待办事项，但是当用户想要关闭模式时，如果它尚未挂起，则应该取消请求。

const [addTodo, { isLoading }] = useAddTodoMutation();

const onSubmit = async (values: ToDo) => {
     try {
      await addTodo(values).unwrap();
      console.log(\'Successful\')
    } catch (error) {
      console.log(\'failed\')
    }
  };

我知道有一个abort 可以取消像addTodo(values).abort(); 这样的突变，我们可以在useEffect 清理中使用它和useRef。

是否可以编写通用方式或自定义挂钩来包装我的所有突变并在卸载组件时处理取消请求？

标签： reactjs react-redux redux-toolkit rtk-query

【解决方案1】：

这样做几乎没有任何价值。如果您的请求处于未决状态，只要您不在最初的几毫秒内，该请求就已经发送到服务器，而客户端只是在等待响应。即使您取消它并且服务器上的数据可能已经更改，服务器也会继续处理该请求。因此，让请求完成然后使可能被突变更改的所有缓存数据（通常通过重新获取）无效通常是有意义的。

如果您取消请求，则不会发生失效。

说了这么多：如果你用myTriggerFunction() 触发了你的突变，你可以这样做

const request = myTriggerFunction()

// ...

request.abort()

【讨论】：

【解决方案2】：

您可以使用自定义钩子来包装突变：

const { useMyMutation } = dataHandlerApi;

const timeout = 5000;

export const useMyMutationWithTimeout = () => {
  const [trigger, data] = useMyMutation();

  const triggerWithTimeout = (args) => {
    const request = trigger(args);

    setTimeout(() => request?.abort(), timeout);
  };

  return [triggerWithTimeout , data];
};

【讨论】：