Angular 7 - 返回新的 Promise 时如何在 http.post 上捕获 500 服务器错误？答案

【问题标题】：Angular 7 - How to capture 500 server error on http.post when returning a new Promise?Angular 7 - 返回新的 Promise 时如何在 http.post 上捕获 500 服务器错误？
【发布时间】：2019-03-22 15:35:46
【问题描述】：

我收到一个 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);
        }
      );
    });
  }

【问题讨论】：

只是一个问题，你使用 Promises 而不是使用 Angular 原生使用的 Observable 是有原因的？
没有什么特别的原因，除了使用我已经知道的。我很乐意重新考虑使用 Observable 而不是不确定如何正确执行。最初，当我选择使用 Promises 时，我选择了当时我认为更安全的选择，让请求按照我的预期运行。

标签： angular promise http-post

【解决方案1】：

如果出现错误，你想拒绝 Promise：

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);
        }
      );
    });
  }

【讨论】：

我试过了，但没用.

【解决方案2】：

我认为您的问题的解决方案可能是 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;

【讨论】：

HttpInterceptor 会捕获每一个响应，这不是这里的问题。
它只会在你想要的时候捕获所有这些。可以根据响应代码、消息或其他任何内容轻松过滤它们。
我已经有一个拦截器用于身份验证，所以我根据响应代码 500 过滤它

【解决方案3】：

我能够通过使用 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);
  }
}

【讨论】：