angular - 在 Angular 6 中将异步代码转换为同步代码 - 使用 Async/Await 的返回类型约束

Question

我正在编写一个服务，该服务将帮助从 URL 获取数据，将其转换为类型数组并将其returnType传递给它注入的任何组件：

InjectableService（fetchJSON()返回一个Observable<JSON>）：

@Injectable(
  ...
)
export class InjectableService {
  dataToReturn: returnType[] = [];
  const url: string = "https://some.url/some.queries";

  constructor(private transactionService: TransactionService) {} //for encapsulating HTTP calls

  public getData(): returnType[] {
    this.transactionService.fetchJSON(this.url).subscribe(
      result => {
        this.functionToMassageResultIntoReturnTypeArray(result);
      }
    );

    return this.dataToReturn;
  }

  private functionToMassageResultIntoReturnypeArray(result: any) {
    //some logic...
    this.dataToReturn.push(//some data...);
  }
}

ParentComponentthis.data （模板中反映的任何更改）：

@Component(
  ...
)
export class ParentComponent implements OnInit, OnChanges{
  data: returnType[]= [];

  constructor(private dataService: InjectableService) {}

  ngOnInit {
    this.data = this.dataService.getData();
  }

  ngOnChanges {
    this.data = this.dataService.getData();
  }
}

显然，这失败了，因为在InjectableService.getData() 函数返回数据之前订阅没有解析。所以，基本上我需要一种方法来确保InjectableService（subscribe()函数）中的异步代码以同步方式执行。

令人惊讶的是，在 Angular 6 中似乎没有简单的方法可以做到这一点。我能找到的最接近的是async-await模式：

public async getData(): returnType[] {
  await this.transactionService.fetchJSON(this.url).subscribe(
    result => {
      this.functionToMassageResultIntoReturnTypeArray(result);
    }
  );

  return this.dataToReturn;
}

但这并没有编译——它在抱怨函数的返回值；显然，它只能返回一个“与 Promise 兼容的构造函数值”。

为什么 Angular 会限制async函数返回类似 Promise 的对象（本质上是异步的），而该async-await模式的重点是让异步代码同步运行？

我觉得这背后有一个很好的理由，但我在这里错过了重点。

标签： angularasynchronouspromiseasync-awaitangular-promise