如何等待异步 HTTP 请求在 Angular 4 上返回值？答案

【问题标题】：How to wait for async HTTP requests to return values on Angular 4?如何等待异步 HTTP 请求在 Angular 4 上返回值？
【发布时间】：2023-03-03 12:54:02
【问题描述】：

我有一些“卡片”，我想在 Angular 服务上为它们获取信息，问题是我通过 API 上的 http 请求获取这些信息，并且我希望在所有请求完成后返回。

cards.component.ts

import {Component} from '@angular/core';

import {CardsService} from './cards.service';

import 'easy-pie-chart/dist/jquery.easypiechart.js';

@Component({
  selector: 'cards',
  templateUrl: './cards.html',
  styleUrls: ['./cards.scss']
})
// TODO: move easypiechart to component
export class Cards {

  public charts: any;

  constructor(private _cardsService: CardsService) {
    this.charts = this._cardsService.getData();
  }
}

cards.service.ts

import {Injectable} from '@angular/core';
import {BaThemeConfigProvider, colorHelper} from '../../../theme';
import { Http, Headers, Response } from '@angular/http';
import {Observable} from "rxjs/Observable";

@Injectable()
export class CardsService {
  _meterCountURL = 'http://localhost:8080/meter/count';
  _cardMeter;
  _cardConsumption;
  constructor(private _baConfig:BaThemeConfigProvider, private http: Http) {
  }

  getData() {
    let pieColor = this._baConfig.get().colors.custom.dashboardPieChart;

    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded',
                               'Authorization': 'Bearer ' + localStorage.getItem('id_token')});

    Observable.forkJoin(
      this.http.get(this._meterCountURL, {headers: headers}).map((response) => {response.json()['data'];}),
      this.http.get(this._meterCountURL, {headers: headers}).map((response) => {response.json()['data'];})
    ).subscribe(
      data => {
        this._cardMeter = data[0];
        this._cardConsumption = data[1];
      },
      error => console.log(error)
    );

    return [
        color: pieColor,
        description: 'Consumo do mês atual',
        stats: 0 || this._cardConsumption,
        icon: 'ion-flash',
      }, {
        color: pieColor,
        description: 'Número de unidades ativas',
        stats: 0 || this._cardMeter,
        icon: 'ion-ios-speedometer',
      }
    ];
  }
}

当它运行时，它应该有一个整数，它出现：

[对象对象]。

如果我尝试将 return 语句放在 subscribe 函数中，“cards.component.ts”会给我以下错误：

类型“void”不可分配给类型“Object[]”。

http请求正确完成后如何返回卡片信息？

【问题讨论】：

标签： node.js angular rest typescript asynchronous

【解决方案1】：

您应该在 getData() 方法中返回 observable，然后订阅您的组件。这样组件就知道 observable 何时完成（在 subscribe 方法中）。

// card.service.ts
getData() {
    return Observable.forkJoin(...);
}

// cards.component.ts
this._cardsService.getData().subscribe(data => {
    this.charts = ...;
});

【讨论】：