Angular 7 - Как зафиксировать 500 ошибок сервера на http.post при возврате нового Promise? - PullRequest
Новая
       19

Angular 7 - Как зафиксировать 500 ошибок сервера на http.post при возврате нового Promise?

0 голосов
/ 22 марта 2019

Я получаю 500 ошибок сервера (что я ожидаю), но моя текущая реализация не фиксирует ошибку.Вместо того, чтобы фиксировать ошибку в компоненте и обрабатывать ее, приложение выдает ошибку 500 серверов в консоли браузера, и выполнение останавливается, а вращатель загрузки остается.Мне трудно понять это.Я реструктурировал обещание несколькими разными способами, но не повезло.

** Обновление **

Я обновил службу, чтобы использовать отклонение в обещании, но это все равно не сработало.

Код компонента 

save() {
    this.loading = true;  this.itemService.updateItems(this.updatedItems, this.activeCompanyId).then(() => {
       this.loading = false;
     }).catch((err) => {
       console.log("Error updating items", err);
     });
  }

Сервисный код 

updateItems(items:Item[], companyId) {
    let headers = new HttpHeaders()
      .set("Content-Type", "application/json")
      .set("CompanyId", companyId);

    return new Promise((resolve, reject) => {
      this.http.post(`${this._config.API_URL}`, items, { headers }).subscribe(
        data => {
          resolve(data);
        },
        err => {
          console.log('Error updating items', err);
          reject(err);
        }
      );
    });
  }

Ответы [ 3 ]

1 голос
/ 22 марта 2019

В случае ошибки вы хотите отклонить обещание: 

updateItems(items:Item[], companyId) {
    let headers = new HttpHeaders()
      .set("Content-Type", "application/json")
      .set("CompanyId", companyId);

    return new Promise((resolve, reject) => {
      this.http.post(`${this._config.API_URL}`, items, { headers }).subscribe(
        data => {
          resolve(data);
        },
        err => {
          console.log('Error updating items', err);
          reject(err);
        }
      );
    });
  }
0 голосов
/ 22 марта 2019

Мне удалось решить проблему с помощью HttpIntercepter 

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


@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService, public navService: NavService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let request = req.clone({
      withCredentials: true
    });

    return next.handle(request).pipe(catchError((err, caught) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 500) {
          return throwError(err)
        }
      }
      return of(err);
    }) as any);
  }
}
0 голосов
/ 22 марта 2019

Я думаю, что решением вашей проблемы может быть перехватчик http: https://angular.io/api/common/http/HttpInterceptor

создайте файл (например, error-interceptor.ts и внутри добавьте следующее (обязательно добавьте этот класс к поставщикам вашего модуля) 

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor() {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
        catchError((errorResponse: HttpErrorResponse) => {              
            console.error(errorResponse.error);             
        })
    );
}

} 

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],

Как видно из названия, теперь вы можете "перехватить" все входящие http-ответы и проверить на наличие ошибок. В зависимости от того, что вы используете для отправки вашего ответа на обратной стороне, ваш ответ после ошибки (это экспресс). 

res.status(500).json({ message: "Server Boo-Boo" });

Затем вы можете получить доступ к сообщению с помощью: 

errorResponse.error.message;
...