Question

我有一个被多次用于异步获取请求的组件。如果任何请求失败，我想停止获取。这是我尝试过的：

componentDidMount() {
    fetch(this.props.url, { signal: this.abortController.signal, headers: this.props.headers })
      .then((response) => {
        if (!response.ok) {
          createErrorDialog(response);
          this.abortController.abort();
        } else { // do something
               }
       });
 }

Answer 1

因此，如果一个请求失败，则发出请求的所有组件都应该停止？然后，您应该通过道具将中止控制器传递给所有组件，以便它们具有通用的AbortController。

让我们说您正在传递以下内容：

let controller = new AbortController();

<Component abortController={controller}>

然后在组件中执行以下操作：

fetch(this.props.url, { signal: this.props.abortController.signal, headers: this.props.headers })
  .then((response) => {
    //do what you need to in here
   })
  .catch(function(e) {
    //abort the controller here
    this.props.abortController.abort();

    //do what you need to do in here with your error
  });

如果第一个在reactjs中失败，则取消后续的提取请求

1 个答案: