Question

在我的home.ts中，我正在调用服务中的函数，该函数使用firestore响应中的数据（可观察）填充数组，但是当我尝试从home.ts中访问此数据时，它是未定义的，因为它没有等待完成功能。我已经尝试过等待await异步，但是仍然无法正常工作。

这是我的代码：

home.ts

async addMarkers(){
    console.log("before await");
    let dataMarkers:MarkerOptions[] = await this.wcService.getWcData();
    console.log("after de await"); //executed before getWcData response
    console.log(dataMarkers); //Here is undefined
    ...`

wcService.ts

async getWcData() {
    let wcsCollection = this.db.collection<Wc>('wcs');
    wcsCollection.valueChanges().subscribe(res=>{
      res.forEach(element => {   
          this.addWcToMarkerOptionsArray(element.latitude,element.longitude,element);
          console.log("added element to this.markersWc");
      });
      console.log("returning results: " + this.markersWc);
      return this.markersWc;
    });
}

控制台日志按以下顺序显示： "Before await" "After await" "returning results...."

如何强制功能等待结果？

非常感谢！

Answer 1

您可以使用Observable将Promise转换为toPromise

import 'rxjs/add/operator/toPromise'

然后您的服务将是这样的：

async getWcData() {
    let wcsCollection = this.db.collection<Wc>('wcs');
    const result = await wcsCollection.valueChanges().toPromise();
    result.forEach(element => { 
      this.addWcToMarkerOptionsArray(element.latitude,element.longitude,element);
      console.log("added element to this.markersWc");
    });
    return this.markersWc;
}

Answer 2

可观察者必须在诺言解决之前完成。
您可以使用“第一”运算符解决该问题，该运算符采用第一个发出的值，然后完成所组成的可观察对象：

async getWcData() {
    let wcsCollection = this.db.collection<Wc>('wcs');
    const result = await wcsCollection.valueChanges().first().toPromise();
    result.forEach(element => { 
      this.addWcToMarkerOptionsArray(element.latitude,element.longitude,element);
      console.log("added element to this.markersWc");
    });
    return this.markersWc;
}

如何等待函数从可观察到的响应中返回数据？

2 个答案: