使用路由解析器处理错误

Question

我正在使用简单的路由解析器在用户访问页面之前加载数据：

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
      return this.summaryService.getAllAnalytics();
  }

我如何处理 API 调用失败（连接不良或任何其他原因）时可能发生的错误，阻止用户路由到请求的页面，并改为显示错误？

目前，当我的 API 出现问题时，我收到以下错误：

Error: Uncaught (in promise): [object Object]

页面保持不变。我无法处理我收到的错误。

Answer 1

如果您的服务 returns 是 Promise，那么您可以使用 Promise.prototype.catch method, and if it returns an Observable then use Rx.Observable.catch

在 catch 中你可以记录错误 or/and 重定向到错误页面 or/and 重定向到其他地方...

在 Observable 的情况下，它看起来像这样：

import { of } from "rxjs/observable/of";
import 'rxjs/add/operator/catch';
...
resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
      return this.summaryService.getAllAnalytics()
          .catch(err => {
              console.error(err);
              return of();
          });
  }

使用路由解析器处理错误

Handle errors using route resolver

angular-routing

angular