Отмените последующие запросы на выборку, если первый из них завершится неудачно в реакции

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
  });