取消正在使用中的 Axios 请求效果未运行

Question

我正在尝试取消 axios 请求，但我只取得了部分成功。我有这个函数，当我发出 GET 请求时返回一个承诺：

const getCards = (token) => {
const URL = isDev
? "https://cors-anywhere.herokuapp.com/https://privacy.com/api/v1/card"
: "https://privacy.com/api/v1/card";
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
cancelToken: source.token,
};
return axios.get(URL, config);
};

我在updateCards()内部调用此函数，如下所示：

const updateCards = async () => {
console.log("Updating Cards");
setCards([]);
setStarted(true);
setLoading(true);
let response = await getCards(token).catch((thrown) => {
if (axios.isCancel(thrown)) {
console.error("[UpdateCards]", thrown.message);
}
});
/**
* response is undefined when we cancel the request on unmount
*/
if (typeof response === "undefined") return console.log("Undefined");
console.log("Got Response from UpdateCards", response);
setLoading(false);
};

我在 useEffect 钩子中取消我的请求，如下所示：

useEffect(() => {
return () => {
source.cancel()
}
}, [])

我已经在我的状态声明下设置了我的取消令牌，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

我的问题是，如果我在useEffect((中调用我的updateCards((函数，我可以很好地取消它，但是如果我使用按钮调用相同的函数，则不会运行取消。我到处寻找，我找到的唯一解决方案是我必须在 useEffect(( 钩子中调用我的请求，但这不是我想要做的事情。我该何去何从？

以下是我查看的资源：

https://github.com/axios/axios#cancellation

https://medium.com/@selvaganesh93/how-to-clean-up-subscriptions-in-react-components-using-abortcontroller-72335f19b6f7

无法通过取消令牌取消 Axios 发布请求

Answer 1

要有一个地方来存储行为类似于组件的实例变量的变量，您可以使用useRef.它是您想要的任何东西的容器。您可以将取消令牌存储在那里：

function Privacy(props) {
const source = useRef(null);
function getSource() {
if (source.current == null) {
const CancelToken = axios.CancelToken;
source.current = CancelToken.source();
}
return source.current;
}
useEffect(() => {
return () => {
if (source.current != null) source.current.cancel();
}
}, [])
// call `getSource()` wherever you need the Axios source
}