RX JS Angular - Обработка ошибок с использованием .subscribe и Observable

Question

У меня есть backend api для создания нового продукта. Код внешнего интерфейса angular должен вызывать API серверного интерфейса. Как выполнить обработку ошибок с помощью ** .subscribe **. Я использую HTTPClient и Observable и читал о том, как RX JS использует обработку ошибок,

Приложение должно называть его Observable и .subscribe ( ).

api / create должен обрабатывать успех и сбой (ошибка) - Если API возвращает 200: он должен печатать успех - Если API возвращает 400, должен выдавать ошибку

псевдокод

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

ID = 'foo';
            this.http.post('/api/create', {
                productName: this.form.value.productName,
                productValue: this.form.value.productValue,
            }).subscribe(
                resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
            );


private onSubmitSuccess(resp) {
        console.log(resp);
        this.ID = resp.ID;
        this.submitSuccess = true;
        this.submitFailed = false;
    }

    private onSubmitFailure(resp) {
        console.log(resp);
        this.submitFailed = true;
        this.submitSuccess = false;
    }  ```

Answer 1

Если вы не можете использовать канал async и должны использовать подписку, использование операторов pipe является наилучшей практикой и позволяет вам отказаться от подписки при уничтожении компонента. Более функционально использовать операторы для ввода logi c, так как подписка должна использоваться только для того, чтобы показать, что поток наблюдается. Это может быть что-то вроде этого:

  ID = 'foo';
  onDestroy = new Subject<boolean>();

  this.http.post('/api/create', {
      productName: this.form.value.productName,
      productValue: this.form.value.productValue,
  }).pipe(
    catchError(err => {
      onSubmitFailure(err);
      return of(err);
    }),
    takeUntil(this.onDestroy),
    tap(resp => onSubitSuccess(resp)),
  ).subscribe();

  onSubmitSuccess(resp) {
      console.log(resp);
      this.ID = resp.ID;
      this.submitSuccess = true;
      this.submitFailed = false;
  }

  onSubmitFailure(resp) {
      console.log(resp);
      this.submitFailed = true;
      this.submitSuccess = false;
  } 

  ngOnDestroy() {
      this.onDestroy$.next(true);
      this.onDestroy$.unsubscribe();
  }

Answer 2

Обработка ошибок запроса . Официальная Angular документация

getConfig() {
  return this.http.get<Config>(this.configUrl)
    .pipe(
      catchError(this.handleError)
    );
}

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
  } else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Backend returned code ${error.status}, ` +
      `body was: ${error.error}`);
  }
  // return an observable with a user-facing error message
  return throwError(
    'Something bad happened; please try again later.');
};