如何取消 RTK-Query 请求

我正在使用 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

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

stack overflow How to cancel the RTK-Query requests
原文答案
author avatar

接受的答案

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

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

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

const request = myTriggerFunction()

// ...

request.abort()

答案:

作者头像

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

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];
};