如何替换服务调用中的toPromise方法，及时获取可正常访问的返回数据

问题根本原因 #

1. getFacilityCommonData 方法返回的是Angular HttpClient生成的Observable异步对象，不是实际的HTTP响应结果，因此你直接取.data属性肯定拿不到值，这部分逻辑是完全错误的。
2. 原toPromise写法并不是「返回耗时过长」，而是异步请求的响应时机天然晚于组件的同步渲染流程：你在组件初始化的同步阶段访问this.commonData的时候，HTTP请求还没返回，等请求回来赋值时GUI已经渲染完成，如果你用了OnPush变更检测策略，甚至不会触发页面重新渲染，才会出现数据无法使用的问题。

解决方案 #

推荐按优先级选择以下方案：

方案1：配合Angular async管道直接使用Observable（最优） #

不需要转Promise，直接在模板中通过async管道处理异步逻辑，Angular会自动管理订阅、响应更新、自动取消订阅，无需手动处理变更检测。

• 组件代码改造：

// 顶部先导入Observable
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 声明Observable类型变量
commonData$: Observable<any>;

getCommonData() {
    const facility_id = this._router.snapshot.params.id;
    // 直接拿到返回的Observable，提前提取data字段
    this.commonData$ = this._generalService.getFacilityCommonData(facility_id).pipe(
      map(res => res.data)
    );
}

• 模板代码改造：

<!-- 用async管道自动订阅，数据返回后自动渲染 -->
<div *ngIf="commonData$ | async as commonData">
  <!-- 这里直接使用commonData的所有属性即可 -->
  <span>设施名称：{{ commonData.name }}</span>
</div>

方案2：路由Resolve守卫预加载数据（要求进入页面前就拿到所有数据） #

如果你的业务要求组件渲染完成时必须有数据，可以通过路由的Resolve守卫在进入页面前就完成数据请求，组件初始化时就能直接拿到同步数据。

1. 新增Resolve守卫：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { GeneralService } from '你的服务路径';

@Injectable({ providedIn: 'root' })
export class FacilityCommonDataResolve implements Resolve<any> {
  constructor(private generalService: GeneralService) {}

  resolve(route: ActivatedRouteSnapshot) {
    const facilityId = route.params.id;
    // 预请求数据，路由会等请求完成再进入组件
    return this.generalService.getFacilityCommonData(facilityId).toPromise();
  }
}

2. 路由配置新增resolve参数：

{
  path: 'facility/:id', // 替换为你的实际路由
  component: 你的组件类,
  resolve: { commonData: FacilityCommonDataResolve }
}

3. 组件内直接拿预加载的同步数据：

ngOnInit() {
  // 组件初始化时就可以拿到数据，无需等待异步请求
  this.commonData = this._router.snapshot.data.commonData.data;
}

方案3：async/await改造现有Promise逻辑 #

如果不想改动现有逻辑太多，可以用async/await优化异步写法，配合变更检测触发更新：

async getCommonData() {
    const facility_id = this._router.snapshot.params.id;
    const res = await this._generalService.getFacilityCommonData(facility_id).toPromise();
    this.commonData = res.data;
    // 如果组件用了OnPush变更检测策略，加下面一行手动触发更新
    // import { ChangeDetectorRef } from '@angular/core';
    // 构造函数注入cdr: ChangeDetectorRef
    // this.cdr.markForCheck();
}

服务代码优化建议 #

你现有服务中的多余map逻辑可以直接删掉，没有任何作用，还可以避免空参数报错：

// 把返回类型从any改为Observable<any>更规范
getFacilityCommonData(facility_id?: any): Observable<any> {
    const params = facility_id? { facility_id } : {};
    // 不要传null给params，传空对象即可
    return this.http.get(`${apiUrl}/${version}/fetch/common/data/`, { params });
}

内容的提问来源于stack exchange，提问作者Andre