时间戳

首页 > 解决方案 > 取消卸载时的 API 调用

javascript - 取消卸载时的 API 调用

问题描述

当我在卸载时取消 API 调用并再次访问同一页面时，不会再次调用 API。

const cancelToken = axios.CancelToken;
export const signal = cancelToken.source();

我在我的 baseconfig.js 中为 Axios 使用它，我的组件在 useEffect 中有这个

useEffect(() => {
return () => {
      props.dispatch({
      type: LEAVE_PAGE,
    });
    console.log("Unmounting");
    signal.cancel();
  };
},[]);

一旦我离开页面或组件被卸载，API 就会被取消，但再次访问时，被取消的 API 不会被调用。我对所有 api 使用相同的令牌。

标签： javascriptreactjsapiaxiosredux-saga

解决方案

你在export const signal = cancelToken.source();上面写过。这对我来说意味着您正在创建一个全局信号，在组件外部，但在组件内对其进行变异（例如通过取消它）。

相反，您应该在组件中实例化此信号并在那里使用它。这样，每次安装组件时，您都会收到一个新信号。您可以使用 eg 确保不会在每次重新渲染时创建新信号useMemo。考虑：

const YourComponent = (props) => {
  const signal = useMemo(() => axios.CancelToken.source(), []);
  useEffect(() => {
    return () => {
      props.dispatch({
        type: LEAVE_PAGE,
      });
      console.log("Unmounting");
      signal.cancel();
    };
  }, []);

  ...

};

推荐阅读