如何取消RTK查询请求

Question

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

场景是这样的，我有一个模式来显示一个添加todo的表单，但是，当用户想要关闭该模式时，如果它还处于挂起状态，则应该取消该请求。

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

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

Answer 3

假设您将更新用户：

const [updateUser, { isLoading }] = useUpdateUserMutation();
const updateCurrentUser = async (values) => {
try {
const response = await updateUser(...).unwrap();
/...../
} catch (e) {
console.log(e);
}

您可以拨打：

updateUser()?.abort();

从您的组件中的任何位置或将功能注入其他组件