Question

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

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

代码示例：

组件Wrapper.jsx：

    const CancelToken = axios.CancelToken;

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

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

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 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>

取消单独的和所有axios请求

1 个答案: