Angular5+等待服务returns一个承诺

Question

我有一个服务调用 return 是一个承诺，但是当我尝试将 return 类型设置为承诺时，由于类型不正确，我在调用函数中使用它时遇到了问题被识别，所以它不会编译。

所以我尝试使用下面的方法，但是我运行遇到了时间问题（代码在调用完成之前执行）

  private getSomeData(): DataObjectArray[] {
    return this.myService.something().map((response: Response) => {
      return response.children;
    });
  }

  public compileData(): DifferentDataArray[] {

   // get some stuff from a config, then make service call
    let someData = this.getSomeData();

    /* If I have a promise returned, someData errors saying not an array type */
    for (let oneData of someData){
      /* loop through config data + service data making a return object array */
   }
    return this.dataCollection;
  }

Answer 1

  private getSomeData(): DataObjectArray[] {
    return this.myService.something().map((response: Response) => {
      return response.children;
    });
  }

应该是

  private getSomeData(): Promise<DataObjectArray[]> {
    return this.myService.something().map((response: Response) => {
      return response.children;
    });
  }

Answer 2

您可以使用新的 Javascript 关键字 async 和 await

首先使getSomeData异步，这也需要它return一个承诺：

  private async getSomeData(): Promise<DataObjectArray[]> {
    return this.myService.something().map((response: Response) => {
      return response.children;
    });
  }

然后等待compileData中的函数：

let someData = await this.getSomeData();

然而，这意味着 compileData 因为它 return 是一个结果，所以也必须是异步的。这意味着您需要添加 async 关键字并将类型更改为 Promise<DifferentDataArray[]>.

如果你不关心你的结果，你可以调用一个没有等待的异步函数，所以你也不必等待结果，它是在后台处理的。如果您依赖结果，则必须等待它。在这种情况下，您的应用程序的其他部分可以继续！无论如何，如果你正在设计一个异步应用程序，你必须考虑无论如何都会发生什么。

您的完整 compileData 函数：

 public async compileData(): Promise<DifferentDataArray[]> {

   // get some stuff from a config, then make service call
    let someData = await this.getSomeData();

    /* If I have a promise returned, someData errors saying not an array type */
    for (let oneData of someData){
      /* loop through config data + service data making a return object array */
   }
    return this.dataCollection;
  }


  public compileData(): DifferentDataArray[] {

   // get some stuff from a config, then make service call
    let someData = this.getSomeData();

    /* If I have a promise returned, someData errors saying not an array type */
    for (let oneData of someData){
      /* loop through config data + service data making a return object array */
   }
    return this.dataCollection;
  }

Answer 3

我在 Angular 中建议您尝试将事物保持为可观察的。保持一致很好，而不是在 observables 和 promises 之间来回切换。

我不太清楚 myService.something() return 是一个承诺还是一个可观察的。如果可观察到：

  private getSomeData(): Observable<<DataObjectArray[]> {
    return this.myService.something().pipe(
       map(response => response.children)
    );
  }

如果它是一个非常相似的承诺但是：

    private getSomeData(): Observable<<DataObjectArray[]> {
      return fromPromise(this.myService.something()).pipe(
       map(response => response.children)
      );
    }

然后：

  public compileData(): Observable<DifferentDataArray[]> {

   // get some stuff from a config, then make service call
    return this.getSomeData().pipe(
       map(someData => {
           /* If I have a promise returned, someData errors saying not an array type */
           var dataCollection = [];
           for (let oneData of someData){
            /* loop through config data + service data making a return object array */
                 // should dataCollection.push(changedData);
            }
            return dataCollection;
       });
    );

  }

终于到别处消费了：

     this.compileData().subscribe(compiledData => {
         // do something with the compiled data
     });

备注：管道运算符非常强大。它需要一个可观察对象，并允许您在 return 对其进行处理之前对其进行一些处理。在这种情况下，我使用了 map 运算符，因为您只是稍微改变了 return 的形状。在链的末端，您必须始终订阅一个可观察对象以取回数据（根据我示例中的最后一个黑色）

Angular5+等待服务returns一个承诺

Angular 5+ wait for service that returns a promise

wait

promise

observable

angular