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

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

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

对于您提到的怪异行为，应从卸载中删除setState。然后，您可以验证axios是否已取消。但是，请了解您在做什么-尝试在卸载时取消任何正在进行中的 axios呼叫。您需要模拟长时间运行的网络呼叫并卸载以对其进行测试。

Axios不取消请求

1 个答案: