Как бороться с ошибками кода http, заполняя выбранные параметры наблюдаемыми

Question

Я заполнил некоторые выбранные опции наблюдаемыми, вызывая веб-сервисы.Дело в том, что я пытаюсь получить ошибки кода http, чтобы скрыть форму (если любой из них код http отличается от 200) и показать сообщение пользователю.

Может ли кто-нибудь предложить мнехорошая практика для этого?

Заранее спасибо!

Репо: https://github.com/jreategui07/testing-subscriptions-form

Поддельный сервер работает с: mockserver -p 8080 -m mock

GET.mock

HTTP/1.1 400 Bad Request
Access-Control-Allow-Origin: *
Content-Type: text/plain; charset=utf-8
Connection: keep-alive

[
   { "error": "c1", "error_des": "any error" }
]

Answer 1

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

• Определить переменную, которая будет отслеживать formErrors:

formHasError: string[] = [];

• Создать функцию ошибки для обработки ошибки

import { catchError } from 'rxjs/operators';
errorFn = catchError(e => {
  const err = e && e.error && e.error[0] && e.error[0].error_des;
  if(err){
    this.formHasError.push(err);
  }
  return [];
});

• В вашем компоненте выбранные наблюдаемые значения изменены на

this.colorSC$ = catalogueService.getColors().pipe(this.errorFn);
this.brandSC$ = catalogueService.getBrands().pipe(this.errorFn);
this.sizeSC$ = catalogueService.getSizes().pipe(this.errorFn);
this.fruitSC$ = catalogueService.getFruits().pipe(this.errorFn);

• В вашем шаблоне добавьте формуHasError

<form (ngSubmit)="onSubmit()" [formGroup]="anyForm" *ngIf="!formHasError.length">
...
</form>
<div class="error" *ngIf="formHasError.length">
  Form has some errors: 
  <p *ngFor="let err of formHasError">{{err}}</p>
</div>

Answer 2

Для дальнейшего использования, попробуйте вставить соответствующий код сюда, чтобы другие пользователи могли видеть, что вы пытаетесь сделать.Ваш соответствующий код - ваш catalogue.service.ts:

export class CatalogueService {

  requestOptions: any;

  constructor(public http: HttpClient) {
    const headers = new HttpHeaders({
      'Content-Type': 'text/plain; charset=utf-8'
    });
    this.requestOptions = { headers: headers, observe: 'response' };
  }
  getColors() {
    return this.http.get('http://localhost:8080/getColors', this.requestOptions).pipe(map(response => response['body']));
  }
  getBrands() {
    return this.http.get('http://localhost:8080/getBrands', this.requestOptions).pipe(map(response => response['body']));
  }
  getSizes() {
    return this.http.get('http://localhost:8080/getSizes', this.requestOptions).pipe(map(response => response['body']));
  }
  getFruits() {
    return this.http.get('http://localhost:8080/getFruits', this.requestOptions).pipe(map(response => response['body']));
  }
}

В частности, поскольку вы уже правильно соблюдаете response, вы можете просто проверить тип ответа:

this.http.get('http://localhost:8080/getColors', this.requestOptions)
.pipe(
  map(response => !response.ok ? 
                  throw new Error('Request error, reponse code: ' + response.status : 
                  response['body'])
);

Обратите внимание, что добавление Error в map приведет к наблюдаемой ошибке, и вы можете справиться с ней в своем коде, который вызывает запрос следующим образом:

this.service.getColors().pipe(
  catchError((error) => /* do something with that error */
);

Все, что сказаноВы попросили лучшие практики , связанные с этим.В этом случае я рекомендую просмотреть Перехватчики Http , если вы хотите обрабатывать все ответы Http аналогичным образом (например, регистрировать их где-нибудь или показывать подсказку, информирующую пользователя о сбое запроса и т. Д.).Перехватчики позволяют создавать поведение на уровне модуля или даже на уровне приложения для всех ответов, вызываемых из модуля / приложения.