javascript - 使用 Observable.toPromise() 处理全局错误

Question

嗨，我正在使用 angular 5，我正在为它编写一个全局处理程序，如下所示。

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(
    private injector: Injector,
  ) { }


  handleError(error: Error | HttpErrorResponse) {
    const router = this.injector.get(Router);
    const zone = this.injector.get(NgZone);
    console.log('Here')
    console.log(error)

    if (error instanceof HttpErrorResponse) {

      // Client Error Happend
      zone.run(() => router.navigate(['/error'], { queryParams: { error: JSON.stringify(error) } }))

    } else {
      // Log the error anyway
      router.navigate(['/error'], { queryParams: { error: JSON.stringify({ message: 'Failed' }) } });
    }
  }
}

在 Observable 世界中一切正常，即如果我执行失败的 http 调用，如下所示

fireServerError() {
    this.httpService
            .get('https://jsonplaceholder.typicode.com/1')
            .subscribe(data => console.log('Data: ', data));
  }

如果服务器调用失败，我会正确地得到一个错误对象，如控制台图像所示



但是，如果我使用 toPromise() 将其更改为 promise ，而不是那样，如下所示

fireServerError() {
    this.httpService
            .get('https://jsonplaceholder.typicode.com/1')
            .toPromise();
  }

我得到以下字符串堆栈跟踪而不是错误对象本身



我究竟做错了什么。在未处理的 promise 拒绝的情况下如何抛出/获取错误对象。请帮忙。我被困住了；

请找到 stackblitz 链接 Here

Answer 1

一旦你使用 .toPromise() ，您实际上是将行为置于不同的执行上下文中(读取 ECMAScript 10.4)，这意味着必须在新的执行上下文中/周围处理错误，而不是像您期望的那样让它们在 Angular 中冒泡。
我不能说我完全遵循您的示例代码(fireServerError 总是应该通过 HTTP 调用引发错误？)，但似乎您想尝试在没有本地错误处理的情况下执行 promise ，而不是有任何从 promise 冒泡到 Angular 错误处理的错误。我不确定我是否会推荐，我认为在本地处理 promise 错误是最佳实践(即在创建 promise 时使用 Promise.prototype.catch 或 try/await/catch block)。
话虽如此，错误处理当然是一个复杂的话题，如果您一心只想在全局级别处理所有错误，那么您可以尝试使用全局窗口事件处理程序来捕获所有未处理的 promise rejections并在那里处理它们:

window.addEventListener("unhandledrejection", event => {
  event.preventDefault(); // prevent the default promise rejection behavior
  console.error(event); // do whatever you want with the error
}, false);

MDN guide on promises也可能有助于清除一些东西，希望有帮助!