angular - Angular 4 中 HTTP 错误的集中处理

Question

我想在 HTTP 请求失败时通知用户，而不必为每个 HTTP 请求编写额外的代码。

我有一个 Angular 2 的工作原型(prototype):

@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 会提供一个公共(public)的、支持良好的 API 来集中处理错误。除了解析错误消息，真的没有办法集中处理 HTTP 错误吗？

更新:如果组件可以轻松覆盖集中式错误处理，我会更喜欢。

Answer 1

另一种选择是简单地拥有一个委托(delegate)给 Http 服务的服务，同时添加您需要与 API 交互的任何自定义错误处理、调试逻辑、额外的 header 等。

此服务将成为您与任何与 Http 相关的交互的集中点，因此您可以将您的错误处理集中在那里。在我开发的任何项目中，我总是创建这样一个类，因为实际上您与之交互的每个 API 都有一些必须在每个请求中发生的通用配置(即使该配置与指定要使用的基本 url 一样少)。

此类的示例:

export class ApiGateway {

  baseURL = "https://myapi.com";  // or sometimes pulled from another file
  constructor(private http: Http) { }

  get(path, params) {
    showLoadingIndicator();

    let headers = this.createMySpecialHeaders();
    let options = { headers: headers } // and whatever else you need to generalize
    let fullUrl = this.baseUrl + path + '?' + this.urlEncode(params)`;
    return this.get(path, params, options)
               .do(() => hideLoadingIndicator())
               .map(res => res.json())
               .catch(err => {
                    hideLoadingIndicator();
                  // show error message or whatever the app does with API errors etc
                  // sometimes rethrow the error, depending on the use case
                })
  }
}

对我来说，这是基本的 OOP 原则 - 将您与您无法控制的事物的交互包装在一个适配器类中，以允许您针对外部更改提供一些保护，并在必要时将外部事物的 API 更改为您喜欢的东西。

有了这样一个类，例如，如果您升级到 Angular 4 并且接收错误的方式发生了变化，您只有一个地方可以更改以处理新的错误技术。