Akita

Обработка ошибок

Когда мы выполняем HTTP-запрос и получаем ошибку, мы хотим уведомить пользователя об этой ошибке.

Ошибка в локальном компоненте

Ошибка локального компонента - это когда только текущий компонент должен знать об ошибке, поэтому мы можем установить ее один раз в компоненте и забыть о ней.

class TodosService {
  updateTodo() {
    return this.http.post().pipe(
      tap(() => this.store.updateEntity(...))
    )
  }
}

Преимущество заключается в том, что нам не нужно сохранять ошибку в хранилище и сбрасывать ее при уничтожении.

Другой случай, когда вам не нужно показывать ошибку в компоненте, потому что вы используете, например, глобальный тостер. В таком случае вы можете сделать это прямо в сервисе.

import { EMPTY } from 'rxjs';

class TodosService {
  constructor(private toaster: Toaster) {}

  updateTodo() {
    return this.http.post().pipe(
      tap(() => this.store.updateEntity(...)),
      catchError((err) => {
        this.toaster.error(...);
        return EMPTY;
      })
    )
  }
}

Глобальные ошибки

Если вы хотите сообщить об ошибке другим компонентам или службам, вы можете сохранить ошибку в хранилище.

class TodosService {
  constructor(private toaster: Toaster) {}

  updateTodo() {
    return this.http.post().pipe(
      tap(() => this.store.updateEntity(...)),
      catchError((err) => {
        this.store.setError(error);
        return EMPTY;
      })
    )
  }
}
@Component({
  template: `<div *ngIf="error | async">{{error}}</div>`
})
class TodosComponent {
  error$ = this.todosQuery.selectError();

  updateTodo() {
    this.todosService.updateTodo().subscribe();
  }
}

Если вы выберете этот способ, не забудьте сбросить ошибку, когда это необходимо.