Javascript 取消单独和所有axios请求

问题：我有一个React应用程序，可以触发axios请求，您可以单击按钮逐个取消请求。现在，我又创建了一个按钮，可以一次取消所有请求，但我不知道怎么做，因为我已经在单独取消的请求中设置了

cancelToken

config

问题：如何通过单击按钮取消代码示例中的所有三个请求

代码示例：

组件包装器.jsx：

    const CancelToken = axios.CancelToken;

    <RequestComponent cancelToken={CancelToken}>
    <RequestComponent cancelToken={CancelToken}>
    <RequestComponent cancelToken={CancelToken}>

    <button onClick={/* Something here */}>Cancel all requests</button>

const CancelToken=axios.CancelToken；
取消所有请求

Component RequestComponent.jsx：

    let cancel;

    // new axios request
    axios.get('/user/12345', {
      cancelToken: new this.props.CancelToken(function executor(c) {
        cancel = c;
      })
    });

    // cancel this one particular request
    <button onClick={cancel('Request canceled')}>Cancel this one request</button>

让我们取消；
//新axios请求
axios.get（'/user/12345'{
cancelToken：新的this.props.cancelToken（函数执行器（c）{
取消=c；
})
});
//取消这一特定请求
取消这一请求

---

我读了，但仍然无法理解这一点。

在包含

RequestComponents

的父组件中，传递一个附加的道具，该道具将在请求后调用

<RequestComponent cancelToken={CancelToken} onRequest={persistCancel}>
<RequestComponent cancelToken={CancelToken} onRequest={persistCancel}>
<RequestComponent cancelToken={CancelToken} onRequest={persistCancel}>

在父组件中，存储取消功能

persistCancel = (cancel) => {
    this.setState({cancels: [...this.state.cancels, cancel]}
}

如果要取消所有函数，请调用这些函数

<button onClick={()=>{this.state.cancels.forEach((c) => c())}}>Cancel all requests</button>

{this.state.cancels.forEach（（c）=>c（））}>取消所有请求

您需要在组件层次结构中向上移动请求，以便您可以从其

RequestComponent

s外部访问它们。感谢您的解决方案，它很有效。顺便说一句，这里有一个输入错误-我想您的意思是将函数命名为

persistCancel

，而不是

persistToken

。

<button onClick={()=>{this.state.cancels.forEach((c) => c())}}>Cancel all requests</button>