Как получить не http коды состояния при использовании http.get?

Question

Я новичок в машинописи и пытаюсь перенаправить пользователя на страницу с ошибкой, если ответ от API не 200. Я долго искал в интернете и пытался найти хороший способ сделатьэто. Вот что у меня есть:

У меня есть базовые методы http в моем классе обслуживания, например:

PullDataFromServer(id: string): Observable<any> {
    return this.http.get<string>(this.baseUrl + 'api/data/getdata?id=' + id, { observe: 'response' });
  }

На моих классах компонентов у меня есть это:

    this.service.PullDataFromServer(this.userData.Id).subscribe({
      next: data => {
          this.data = data.body;
          this.loaded = true;
      },
      error: err => {
        this.router.navigate(['/errorpage']);
      }
      });

Однако, если http-код не равен 200, я вижу в своем браузере, что серверу требуется много времени для ответа. Я понимаю, что http-вызовы являются асинхронными, и вы не можете сделать их синхронными. Вы можете иметь только некоторый код для работы, пока он приносит данные. Тогда мой вопрос: как мне перенаправить пользователя при ошибке на сервере?

Есть статьи, в которых говорится об асинхронных вызовах, но я не понимаю, как управлять ошибками? Любая помощь будет принята с благодарностью.

Я также попробовал rxjs:

      map(() => ''),
        catchError((error: Error) => {
          return this.router.navigate(['/errorpage']);
        }));

Aysnc Await было бы хорошо, если бы был другой вызов, и я ждал предыдущего вызова. Но как быть, если я просто жду одного звонка и мне нужен ответ на звонок?

Answer 1

Для новичков, которые борются с http-вызовами и перехватывают ошибки, вы можете использовать следующее для перехвата ошибок и ожидания ответов:

  this.service.PullDataFromServer(this.userData.Id).subscribe({
      next: data => {
          this.data = data.body;
          this.loaded = true;
      },
      error: err => {
        this.router.navigate(['/errorpage']);
      }
      });

Если вы ожидаете данных для своей страницы, вы можете использовать угловые возможностикак * ngIf. Если у вас есть другой вызов, ожидающий получения данных, вы можете вложить их в вышеприведенное и иметь свою логику в нем.