Отображение серверных сообщений пользователю в Angular

Question

Я пытаюсь показать пользователю ошибки проверки модели и другие сообщения от веб-API ASP.NET Core 2.1 контроллера.

Это действие POST

[HttpPost("[action]")]
public IActionResult Create([FromBody]Hit hit)
{
    try
    {
        if (hit == null)
            return BadRequest("Hit object is null");

        if (!ModelState.IsValid)
            return BadRequest("Invalid model object");

        var newHit = _hitRepository.Add(hit);
        return Ok(newHit);
    }
    catch (Exception ex)
    {
        return ex.InnerException.Message.Contains("duplicate key") 
            ? BadRequest($"Et Hit med søgeretningen {hit?.SearchDirection} og ordet {hit?.SearchWord} findes allerede") 
            : StatusCode(500, "Internal server error");
    }
}

Мыесть все обычные подозреваемые.Проверка модели и обработка ошибок.

В Angular у меня есть сервис с методом post

create(hit: Hit): Observable<Hit> {
    return this.httpClient.post<Hit>(
      `${environment.apiUrl}/${this.hitRoute}/create`,
      hit
    );
}

Я играл с функцией pipe и catchError, но безуспешно

create(hit: Hit): Observable<Hit> {
    return this.httpClient.post<Hit>(
      `${environment.apiUrl}/${this.hitRoute}/create`, hit)
    .pipe(
      catchError((error: HttpErrorResponse) => {
        return new ErrorObservable(
          `Fejl ved oprettelse af nyt Hit. ${error.message || 'Unknown'} `
        );
      })
    );
}

Компонент Angular имеет функцию создания, использующую службу

addWordToHits() {
    const hit = {
      searchDirection: this.selectedBook,
      searchWord: this.selectedItem.word
    } as Hit;

    this.hitService.create(hit).subscribe(
      (data: Hit) => {
        this.messageService.add({
          severity: 'success',
          summary: 'Hit oprettet',
          detail: data.searchWord
        });
      },
      (err: HttpErrorResponse) => {
        this.messageService.add({
          severity: 'error',
          summary: 'Hit kunne ikke oprettet',
          detail: err.message
        });
      }
    );
}

Сообщение об ошибке сведений не от HttpClient, а от RxJs:

"Observable_1.Observable.throw is not a function"

Я знаюэто потому, что поток прерывается неправильным запросом, а не потоком данных.Но как правильно показывать сообщения с сервера пользователю?

Существует множество руководств по созданию полноценного приложения CRUD с Angular

• Создание приложения CRUDс ASP.NET Core и Angular

• Angular 6 Учебное пособие: изучение Angular путем построения примера приложения CRUD

  Но ни один из них не показывает, какобрабатывать ошибки.

Это наиболее распространенная проблема, так как же выглядит реальный угловой сервис?

Это то, что у меня сейчас

Answer 1

Один из лучших способов справиться с ошибкой - использовать Interceptor.Лучше всего то, что вы можете обрабатывать ошибки на верхнем уровне для всех API.Поэтому необходимо написать тот же повторяющийся код для обработки ошибки http.

http-error.interceptor.ts

import { HttpEvent, 
         HttpInterceptor, 
         HttpHandler, 
         HttpRequest, 
         HttpResponse,
         HttpErrorResponse} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
    return next.handle(request)
       .pipe(
         catchError( (error: HttpErrorResponse) => { 
            let errMsg = '';
            // Client Side Error
            if (error.error instanceof ErrorEvent) {        
              errMsg = `Error: ${error.error.message}`;
            } 
            else {  // Server Side Error
              errMsg = `Error Code: ${error.status},  Message: ${error.message}`;
            }
            return throwError(errMsg);
          })
       )
  }
}  

app.module.ts

@NgModule({
  imports: [...], 
  declarations: [...],
  bootstrap:    [....],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpErrorInterceptor, //<-- provide the interceptor
      multi: true,
    },
    CustomerService,...]
}) 

Answer 2

import { throwError } from 'rxjs';

create(hit: Hit): Observable<Hit> {
    return this.httpClient.post<Hit>(
      `${environment.apiUrl}/${this.hitRoute}/create`, hit)
    .pipe(
      catchError((error: HttpErrorResponse) => {
        return throwError(
          `Fejl ved oprettelse af nyt Hit. ${error.message || 'Unknown'} `
        );
      })
    );
}

---

Создан простой код для репликации этого

import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({})
export class SomeComponent {

  constructor(private httpClient: HttpClient) {
    this.testCatchError();
  }

  testCatchError() {
    this.httpClient
      .get('http://localhost:3000/api/postss')
      .pipe(
        catchError(error => {
          console.log('inside of catchError');
          return throwError({ msg: 'Hello' });
        })
      )
      .subscribe(
        data => {
          console.log(`testRetryOperator >>> data >>> `, data);
        },
        error => {
          console.warn('testRetryOperator >>> error >> ', error);
        }
      );
  }

}