如何取消 RTK-Query 请求

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()

如何取消 RTK-Query 请求

How to cancel the RTK-Query requests

reactjs

react-redux

redux-toolkit

rtk-query