如何取消 RTK 查询请求

Question

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

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

Answer 1

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

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

话虽如此：如果你用 触发你的突变myTriggerFunction()，你可以做

const request = myTriggerFunction()

// ...

request.abort()