Angular 4中HTTP错误的集中处理

发布时间：2020-12-17 18:10:15 所属栏目：安全来源：网络整理

导读：我想告知用户HTTP请求是否失败,而不必为每个HTTP请求编写额外的代码. 我有角度2的工作原型： @Injectable()export class MyErrorHandler extends ErrorHandler { constructor() { super(false); } handleError(error: any) { this.tellUser(error); super.ha

我想告知用户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错误吗？

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

解决方法

另一种选择是简单地拥有一个委托给Http服务的服务,同时添加与API交互所需的任何自定义错误处理,调试逻辑,额外标题等.

然后,此服务成为您与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并且接收错误的方法发生了变化,那么您只需要更改一个地方来处理新的错误技术.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!