取消单独的和所有的 axios 请求

Question

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

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

代码示例：

组件包装器.jsx：

    const CancelToken = axios.CancelToken;

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

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

组件请求组件.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 documentation，但仍然无法弄清楚。

Answer 1

在持有RequestComponents的父组件中，传递一个额外的prop，它将在请求后调用。

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

当有请求时，持久化取消函数。

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

在父组件中，存放取消函数

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

当你想全部取消时调用这些函数。

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