Прерванная выборка все еще вызывает функцию "then"?

Question

У меня есть компонент реагирования, который вызывает fetch / abort при mount / unmount, когда я пытался переместить функцию fetch в отдельный класс, функция "then" продолжает вызывать даже после прерывания запроса на выборку, поэтому выводится текст "Not Aborted" на консоль.

Это выглядит так:

ReactComponent

class ReactComponent extends Component {
  constructor(props) {
    super(props);
    this.TodoService = new TodoService();
  }

  componentDidMount() {
    this.TodoService.fetch().then(res => {
        console.log("Not Aborted");
    });
  }

  componentWillUnmount() {
    this.TodoService.abort();
  }
}

TodoService

class TodoService {
  constructor() {
    this.controller = new AbortController();
    this.signal = this.controller.signal;
  }

  handleErrors(response) {
    if (response.ok) {
      return response;
    }
    throw Error(response.statusText);
  }

  fetch() {
    return fetch(`todos`, {
      signal: this.signal
    })
      .then(this.handleErrors)
      .then(res => res.json())
      .catch(err => console.error(err));
  }

  abort() {
    this.controller.abort();
  }
}

Answer 1

Я чувствую, что это может привести к this контекст.

попробуйте добавить их в конструктор TodoService: this.fetch = this.fetch.bind(this); this.abort = this.abort.bind(this);

Вы вызываете эти методы из другого контекста и текущего контекста. this будет использоваться.

Вот поддержка браузера для AbortController

Answer 2

Вы также можете попробовать это:

      fetch() {

     return fetch(`todos`, 
        {signal: this.signal}, 
        this.controller.abort()
   )
  .then(this.handleErrors)
  .then(res => res.json())
  .catch(err => console.error(err));
}