Axios 不取消请求

Question

我正在尝试取消我在 ComponentDidMount() 中的 ComponentWillUnmount() 中发出的 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

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

You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.

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

Axios 不取消请求

Axios not cancelling requests

cancellation

reactjs

axios