Angular: невозможно поймать сообщение API 404 через сервис

Question

Я хочу показать сообщение, возвращенное API, статус которого 404, как показано ниже:

{message: "Email Address does not exists", status: 404, data: null}

Этот API генерируется на языке SpringBoot.

Я вызываю API в * От 1015 * 8 до service.ts файла:

forgotPwd(value, bearer) {
  return this.http.put(this.rootUrl + 'api/user/forgot_password', value,  {headers: new HttpHeaders({  Authorization: 'Bearer ' + bearer, 'Content-Type': 'application/json'})});
}

А в файле component.ts я хочу разобраться с такой ситуацией:

this.commService.forgotPwd(this.submissionArray, this.userToken).subscribe((data: any) => {
  this.rawData = data;
  const result = this.rawData;
  if (result.status !== 200) {
    console.log(result.message);
  } else {
    console.log(result.message);
  }
});

Однако я не видел что-нибудь в консоли. Как обработать запрос 404/400 в Angular и выбросить соответствующее сообщение в файл компонента, как указано выше?

Answer 1

Все ошибки http будут доступны в обратном вызове ошибок, например

this.service.getData()
    .subscribe(
      (data) => {}, // success path
      (error: HttpErrorResponse)=> {} // error path
    );

В случае ошибки вы получите статус и сообщение.

Так что для вашего случая

this.commService.forgotPwd(this.submissionArray, this.userToken)
.subscribe((data: any) => {
  this.rawData = data;
  const result = this.rawData;
    console.log(result.message);
}, error => {
   console.log('handle error');
});

Примечание. Приведенный выше сценарий работает, когда Rest API возвращает 4XX или 5XX в качестве состояния ответа.