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

Question

我正在尝试在我的角度应用程序中的模块的 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 异常的错误页面。

Answer 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，因此您可以根据需要处理错误响应。