时间戳

首页 > 解决方案 > http post Observable / subscribe 中的角度路由

angular - http post Observable / subscribe 中的角度路由

问题描述

我正在尝试将用户引导到请求中的仪表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;）有效，但它不是有角度的方式。

标签： angularangular-routerangular10angular-observable

解决方案

从 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子句有关。没有理由在那里使用asyncandif子句。这应该可以解决它。

您始终可以debugger在代码中使用来查看函数何时执行。如果您没有完全了解执行的哪一部分subscribe，我建议您这样做几次。

推荐阅读