Блог

Я пытаюсь направить пользователя на панель мониторинга внутри response httpClient.post запроса. Страница перемещается «хорошо» (она отображается в строке URL), но большинство элементов DOM компонентов не загружаются.

Это сообщение в service.ts:

 import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

const baseUrl = 'https://my-api.com';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) { }

  postSomeData(data): Observable<any> {
    return this.httpClient.post(baseUrl   '/postSomeData', data)
  }
 

И вот как я использую это в компоненте:

 this.apiService.postSomeData(params)
            .subscribe(
              async response => {
                response = await response;
                if(response.response == 'success'){
                  // success logic

                }else{
                  // failure message
                }
              },
              error => {
                // error logic
              },
              () => {
                // window.top.location.href = "https://"   window.location.host;
                this.router.navigate(["/dashboard"]);
              });
 

Когда процесс subscribe завершен и маршрутизатор переходит к панели мониторинга, это неполная загрузка DOM панели мониторинга, которую я получаю:

Если я помещаю навигацию ( this.router.navigate(["/dashboard"]); ) в любом месте за пределами подписки или перезагружаю страницу вручную или программно ( window.top.location.href = "https://" window.location.host; ), страница (DOM) загружается просто отлично:

Итак, как я могу реализовать навигацию внутри подписки и получить полную загрузку DOM компонента панели мониторинга? Очевидно complete , что функция внутри подписки не работает для меня. Закомментированная полная перезагрузка страницы ( window.top.location.href = "https://" window.location.host; ) в полной функции работает, но это не угловой способ.

Первый ответ, возвращенный из a subscribe , выполняется, когда HTTP-метод был успешным, поэтому нет необходимости проверять ответ.

Второй ответ выполняется при ошибке.

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

 this.apiService.postSomeData(params)
            .subscribe(
              () => {
                // success logic, HTTP statuscode 20X
              },
              () => {
                // error logic, when a HTTP error has been thrown
              },
              () => {
                // executed when the HTTP function has been completed, doesn't matter whether success or error
                this.router.navigate(["/dashboard"]);
              });
 

Я думаю, что проблема была связана с async if предложением and — . Там нет причин использовать async и if -предложение. Это должно это исправить.

Вы всегда можете использовать debugger в своем коде, чтобы увидеть, когда выполняется функция. Если вы не полностью понимаете, когда какая часть subscribe выполняется, я рекомендую сделать это несколько раз.