Сообщение об ошибке HTTP от API не отображается в компоненте Angular - PullRequest
Новая
       10

Сообщение об ошибке HTTP от API не отображается в компоненте Angular

0 голосов
/ 20 июня 2020

У меня есть серверная конечная точка ExpressJS, которая выглядит (образно) следующим образом: 

function myFunction(req, res, next) {
  if (someErrorCondition)
    res.status(400).json({message: "Something went wrong."});
  else {
    myBackendService.someFunc.then(res.status(200).json({message: "Success!"}))
     .catch(err => next(err))
  }
}

И из внешнего компонента Angular я запрашиваю эту конечную точку через подписку: 

this.myFrontendService.someFunc().subscribe(
  res => {
    console.log(res);
  },
  error => {
    console.log(error);
  });

Когда вызов выполняется правильно (т.е. состояние 200), регистрирует (как и ожидалось) объект JSON {message: "Success!"} как объект res. Но когда он терпит неудачу, он регистрирует: 

Http failure response for http://localhost:4000/myRoute/myFunction: 400 Bad Request

И я нигде не получаю сообщение «Что-то пошло не так». что я отправил из бэкэнда. Коды ошибок обрабатываются по-разному в Angular?

Кроме того, когда я вызываю конечную точку серверной части с помощью cURL, оба сообщения возвращаются как JSON объекты, как и ожидалось.

EDIT: myFrontService class объявление выглядит так: 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FrontendService {

  constructor(private http: HttpClient) { }

  someFunc() {
    return this.http.put(`localhost:4000/myRoute/myFunction`, {data: "here's some data"});
  }
}

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Я нашел проблему. Я использовал HttpInterceptor для процесса аутентификации для фильтрации и обработки кодов 401 и 403 (связанных с ошибками разрешений), а затем для всех остальных кодов (как это 400 в вопросе) я просто выбросил err .message , а не err.error.message , где первое - это строка, которую я получил в своем вопросе: ' Http failure response for ... ', и последнее является фактическим сообщением, отправленным серверной частью: « Что-то пошло не так. ».

Вот HttpInterceptor: 

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(err => {
        if ([401, 403].indexOf(err.status) !== -1) {
            // auto logout if 401 Unauthorized or 403 Forbidden response returned from api
            this.authService.logout();
            location.reload(true);
        }

        const errorFromBackend = err.error.message; // Something went wrong.
        const errorGeneric = err.message; // Http failure response for...
        return throwError(errorFromBackend);
    }))
}
0 голосов
/ 20 июня 2020

Ошибки могут быть разного вида (ошибка сервера, ошибка сети). Посмотрите документацию

Вы можете создать метод, извлекающий сообщение об ошибке в зависимости от типа.

component.ts 

//...
this.myFrontendService.someFunc().subscribe(
  res => {
    console.log(res);
  },
  error => {
    this.handleError(error);
  });


private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) //client side error
  {
    console.error('An error occurred:', error.error.message);
  } 
  else  //server side error
  {
    //console.error(`Backend returned code ${error.status}, body was: ${error.error}`);
    let resp = JSON.parse(error.error);
    console.log(resp.message);//Since you returned a {message: ...} object from API
  }
}

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

...