angular / typescript:异步订阅未按预期返回

时间:2018-07-10 19:11:59

标签: typescript

我确定问题是我是菜鸟,不完全了解异步/等待的基本原理。

我有两个函数:一个返回一个对象,一个返回一个数组(如下所示)。

        
  • 返回Object的对象将按预期返回。
  •     
  • 返回数组的那个返回`undefined`。

造成挂断的区别是什么?


userRole.service.ts

async getUserRolesEnum(): Promise<any> {
    var result: any = {};

    await this.authHttp
      .get<UserRole[]>(this.baseUrl + "UserRoles", { headers: this.httpOptions.headers }).subscribe((data: UserRole[]) => {
        data.forEach(p => result[p.role] = p.id);
      });

    console.log("enum after subscription");
    console.log(result);
    return result;
}

async getUserRolesArray(): Promise<UserRole[]> {
    var result: UserRole[];

    await this.authHttp
      .get<UserRole[]>(this.baseUrl + "UserRoles", { headers: this.httpOptions.headers }).subscribe((data: UserRole[]) => {
        result = data;
        console.log("array within subscription:");
        console.log(result);
      });

    console.log("array after subscription:");
    console.log(result);
    return result;
}


运行时的Chrome控制台:

enter image description here

1 个答案:

答案 0 :(得分:0)

异步/等待仅适用于Promise,不适用于,适用于RxJS Observables,subscribe适用于Observable,&then适用于Promise。

在这里,两个API调用都可观察到。如果希望Async / Await与Obervable一起使用,则应使用 forEach 订阅可观察对象,以在Async / Await中创建并发任务。如图所示,

Subscribe to an Observable with forEach

在这里,当您订阅对象时,您在响应变量上使用了forEach,因此,已订阅的响应数据已得到处理,或者我应该说是通过forEach重新订阅的,并且按照上面链接中显示的规则进行操作。

它也解释了您对问题的评论中的查询。问题是=>在进行数组订阅的情况下,当我执行data.forEach(p => result.push(p))而不是result = data时为什么还能工作?

Promise用于预订单个数据实例,而可用于多个数据。到目前为止,异步/等待仅适用于单个数据。当您使用forEach循环时,响应数据的所有这些多个实例都可以以承诺方式或类似的方式逐个订阅,具体取决于内部实现。但是简单的订阅并不能做到这一点。

就像诺言一样,如果您使用forEach订阅了observable,它们也是不可取消的。

此外,即使它以这种方式工作。建议使用Async / Await和Promises,或使用forEach Subscription(如链接中所示),以避免在以后进行任何更新后出现任何错误。