当我们返回带有 404 异常的 observable 时如何解决 canLoad 问题答案

【问题标题】：How to fix canLoad issue when we are returning an observable with 404 exception当我们返回带有 404 异常的 observable 时如何解决 canLoad 问题
【发布时间】：2019-07-16 20:48:28
【问题描述】：

我正在尝试在我的 Angular 应用程序中的模块的 canLoad 事件中调用 API，

即使该 API 不可用并且在网络中提供 404，我的页面仍在加载。如果有 404，我想避免这种情况，然后我想将我的页面重定向到某个错误页面。

canLoad(route: Route, segments: UrlSegment[]) 
{
       return this.http.get('testapi/getacces').pipe(map((response: boolean) => {
           if (response) {
               return true;
           } else {
               this.router.navigate(['/error']);
               return false;
           }
       }));
   }

如果 API 出现，那么我的代码按预期工作，但问题仅在出现 404 时出现。所以，我期待一个可以处理异常的块来路由到 404 异常的错误页面。

【问题讨论】：

标签： javascript rxjs angular7 canactivate angular-canload

【解决方案1】：

尝试使用catchError() 运算符，它会在出现错误而不是正确响应时处理您的情况。

查看示例：

  canLoad(route: Route, segments: UrlSegment[]) {
    return this.http.get('testapi/getacces').pipe(
      map((response: boolean) => {
        if (response) {
          return true;
        } else {
          this.router.navigate(['/error']);
          return false;
        }
      }),
      catchError((error) =>
        of(error).pipe(
          map(() => {
            this.router.navigate(['/error']);
            return false;
          }),
        ),
      ),
    );
  }

这很有用，因为 404 是错误响应，它不会到达 map 内部，但会到达 catchError 内部，因此您可以根据需要处理错误响应。

【讨论】：