Axios 没有取消请求

Question

我正在尝试取消我在 ComponentWillUnmount() 中的 CompnentDidMount() 中提出的 Axios 请求，正如每个人所说的那样。但是，它似乎不起作用。完全一样。

这是我项目中的相关代码：

        //Make API call
        this.setState({ isMounted: true });
        this.axiosCancelSource = Axios.CancelToken.source();
        var result;
        result = await Axios("/api/product", { cancelToken: this.axiosCancelSource.token });
        if (this.state.isMounted) {
            this.setState({ products: result.data.products });
        }

        
        //this.updateList();


    }

    componentWillUnmount() {
        this.setState({ isMounted: false });
        this.axiosCancelSource.cancel();
    }

这是我在 Chrome DevTools 中的网络选项卡的快照： Network Screenshot

我不确定这是否是问题所在，但似乎我的组件安装和卸载一次非常快，然后再次安装。我也不太确定这是什么原因，或者它是否会影响我的 axios 请求的取消。我已经在互联网上搜索了几个小时试图解决这个问题，所以任何帮助表示赞赏。谢谢！

Answer 1

来自反应文档：https://reactjs.org/docs/react-component.html#componentwillunmount

您不应该在componentWillUnmount() 中调用setState()，因为该组件永远不会被重新渲染。一旦组件实例被卸载，它将永远不会被再次装载。

对于您提到的奇怪行为，您应该从卸载中删除 setState。然后你可以验证你的 axios 取消。但是，请了解您在做什么 - 您在卸载时尝试取消任何 axios 调用 IF ANY IN PROGRESS。你需要模拟一个长时间运行的网络调用并卸载来测试它。