Как исправить проблему canLoad, когда мы возвращаем наблюдаемое с исключением 404

Question

Я пытаюсь вызвать API в событии canLoad для модуля в моем угловом приложении,

Хотя этот 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, так что вы можете обрабатывать ответ об ошибке, как вы хотите.