取消 API 次卸载调用

Question

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

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

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

中有这个

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

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

Answer 1

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

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

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

  ...

};

取消 API 次卸载调用

Cancel API calls on Unmount

javascript

api

reactjs

redux-saga

axios