У меня есть компонент реагирования, который вызывает 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();
}
}