Прерванная выборка все еще вызывает функцию "then"? - PullRequest
0 голосов
/ 14 сентября 2018

У меня есть компонент реагирования, который вызывает fetch / abort при mount / unmount, когда я пытался переместить функцию извлечения в отдельный класс, функция «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();
  }
}

1 Ответ

0 голосов
/ 14 сентября 2018

У меня есть ощущение, что это может сводиться к контексту this.

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

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

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

...