Почему я получаю значение ИСТИНА, если запрошенная фотография не существует в API и я получаю сообщение об ошибке http?

Question

Я новичок в изучении Angular и Typescript, поэтому у меня возникли некоторые проблемы. Я работаю над приложением, которое отображает список фотографий, позволяет нам создавать, редактировать и удалять уже существующие фотографии. Когда я хочу открыть страницу сведений для фотографии, которой не существует, помимо этого у меня есть активатор маршрута, который перенаправляет на страницу 404 not found, когда запрос недействителен, страница по-прежнему загружается без каких-либо данных. Вот сообщения об ошибках, которые я получаю «Не удалось загрузить ресурс: сервер ответил статусом 404 ()» и «core. js: 4197 ERROR HttpErrorResponseerror: {} headers: HttpHeaders {normalizedNames: Map (0), lazyUpdate : null, lazyInit: ƒ} сообщение: «Ответ об ошибке HTTP для https://jsonplaceholder.typicode.com/photos/5453453: 404 OK» имя: «HttpErrorResponse» ok: falsestatus: 404statusText: «OK» url: «https://jsonplaceholder.typicode.com/photos/5453453» proto : HttpResponseBase defaultErrorLogger @ core. js: 4197 ".

Вот мой активатор маршрута:

import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router'
import { Injectable } from '@angular/core'
import { PostsService } from './posts.service'

@Injectable()
export class PostRouteActivator implements CanActivate{
  constructor(private postService: PostsService, private router: Router ){

  }

  canActivate(route:ActivatedRouteSnapshot){
    const postExists = !!this.postService.getPost(+route.params['id']);
    console.log(postExists)
    if (!postExists){
      this.router.navigate(['/404']);
    }
    return postExists
  }
}

Вот моя функция getPost из службы:

 getPost(id: number){
    return this.http.get<Post>(this.apiUrl + "/" + id);
  }

Код для маршрута:

 { path: 'posts/edit/:id', component: EditPostComponent, canDeactivate: ['canDeactivateCreateEvent'], canActivate: [PostRouteActivator] },

Когда я печатаю значение const postExists = !!this.postService.getPost(+route.params['id']); в консоли, кроме запрошенной фотографии / сообщения не существует, получаемое мной значение ИСТИННО. Кто-нибудь может мне помочь? введите описание изображения здесь

Answer 1

Я думаю, если вы правильно обработаете ошибку, эта проблема решится легко. Итак, в вашем PostRoutActivator

вместо

@Injectable()
export class PostRouteActivator implements CanActivate{
  constructor(private postService: PostsService, private router: Router ){

  }

  canActivate(route:ActivatedRouteSnapshot){
    const postExists = !!this.postService.getPost(+route.params['id']);
    console.log(postExists)
    if (!postExists){
      this.router.navigate(['/404']);
    }
    return postExists
  }
}

Если вы можете

 @Injectable()
    export class PostRouteActivator implements CanActivate{
      constructor(private postService: PostsService, private router: Router ){
    
      }
    
      canActivate(route:ActivatedRouteSnapshot){
        const postExists = this.postService.getPost(+route.params['id'])
           .pipe(
               catchError((err)=>{ // make sure you import this operator
                if(err.statusCode == 404) // not sure which property would be just console.log the err and you will know.
                {
                   return false;
                } else {
                   throw err;
               }
             })
           ).subscribe((postExists) => {
               console.log(postExists)
                if (!postExists){
                 this.router.navigate(['/404']);
                }
                return postExists
           }

});
    
}