Angular 4中HTTP错误的集中处理

Question

我想告知用户HTTP请求是否失败,而不必为每个HTTP请求编写额外的代码.

我有角度2的工作原型:

@Injectable()
export class MyErrorHandler extends ErrorHandler {

  constructor() {
    super(false);
  }

  handleError(error: any) {
    this.tellUser(error);
    super.handleError(error);
  }

  tellUser(error: any) {
    // dig for the root cause
    if (error.rejection) {
      error = error.rejection;
    }
    if (error instanceof ViewWrappedError) {
       error = error.originalError;
    }

    let message;
    if (error instanceof Response) {
      // TODO: localize and display nicely
      const messages = {
        0: "Could not connect to server",
      }
      message = messages[error.status] || ("The server reported a system error (HTTP " + error.status + ")");
    } else {
      message = "A system error occurred.";
    }
    console.warn(message);
  }
}

但ViewWrappedError已被Angular 4替换为

export function viewWrappedDebugError(err: any, context: DebugContext): Error {
  if (!(err instanceof Error)) {
    // errors that are not Error instances don't have a stack,
    // so it is ok to wrap them into a new Error object...
    err = new Error(err.toString());
  }
  _addDebugContext(err, context);
  return err;
}

其中,由于在HttpResponse上调用toString,因此很难查询状态代码......

我希望angular能够为集中式错误处理提供一个公共的,支持良好的API.除了解析错误消息之外,真的没有办法集中处理HTTP错误吗？

更新:我更喜欢组件可以轻松覆盖集中式错误处理.

Answer 1

我将这种逻辑集中在 a 中BaseService，然后继承它的每个服务。Angular 2 不提供Http Interceptors像以前的版本那样提供，使得这种东西很难处理。

\n\n

import { Injectable } from \'@angular/core\';\nimport { Response } from \'@angular/http\';\nimport { Observable } from \'rxjs/Observable\';\nimport { NotificationService } from \'********\';\n\n\n@Injectable()\nexport class BaseService {\n  protected url: string;\n  protected http: Http;\n\n  constructor(http: Http, protected notification: NotificationService) {\n    this.http = http;\n  }\n\n  protected extractData(res: Response) {\n      //\n      // Depende do formato da response, algumas APIs retornam um objeto data e dentro deste o conteudo propriamente dito\n      // Em minhas APIs sempre retorno diretamente o objeto que desejo\n      //\n      return res.json();\n  }\n\n  protected handleError(error: Response | any) {\n    let erros: string[] = [];\n\n    switch (error.status) {\n      case 400:\n        let res = error.json();\n\n    //\n    // Depende do formato, minhas APIs sempre retornar um objeto com array errors quando tenho 400\n    //\n        for (let index = 0; index < res.errors.length; index++) {\n          let msg = res.errors[index];\n          erros.push(msg);\n        };\n\n        this.notification.showMultipleWarn(erros);\n        break;\n      case 404:\n    this.notification.showWarning(\'O recurso requisitado n\xc3\xa3o existe.\');\n    break;\n      case 406:\n      case 409:\n      case 500:\n        this.notification.showError(\'Ocorreu um erro inesperado.\');\n        break;\n      default:\n        this.notification.showError(\'Ocorreu um erro inesperado.\');\n        break;\n    }\n\n    return Observable.throw(new Error(error.status));\n  }\n}\n

\n\n

这是我的博客文章，解释了一些不那么冗长的处理方法：Receitas Angular2: Interceptando erros HTTP de forma Global

\n\n

这篇文章是用葡萄牙语写的，但代码可以给你一些提示。我现在正在一些大型项目中使用这种方法，而且效果很好。

\n