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

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

Приложение должно называть его 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;
    }  ```

typescript error-handling rxjs httpclient rxjs-observables
person StarJedi    schedule 16.06.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

  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();
  }
person Denis Akira    schedule 16.06.2020

arrow_upward
-1
arrow_downward

Обработка ошибок запроса. Это официальная документация по 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.');
};
person IAfanasov    schedule 16.06.2020
comment
В этом примере не используется .subscribe - person StarJedi; 16.06.2020
comment
извините, я пропустил эту часть. код внутри функции «подписаться» - это запах. pipes являются более гибкими и должны использоваться, если это не неизбежно. как только вы привыкнете к RxJs, вы полностью забудете об этом (: вот один из аргументов: kimsereyblog.blogspot.com/2018/05/ - person IAfanasov; 16.06.2020