如何从 Angular 8 或 9 中的异步函数返回数组

Question

点击Click Me按钮调用getDataAsObservable脚本中定义的getDataAsObservable方法：

export class HttpService {
  jsonFile = '../assets/products.json';

  constructor(private http: HttpClient) {}

  getDataAsObservable(): Observable<any> {
    return this.http.get(this.jsonFile)
  }
} 

在从http 服务接收到observable 后，app.component.ts 脚本中定义的requestDataAndWait 方法将接收到的response 分配给局部变量data 并将其返回给onClick 方法.但是onClick 方法不是接收数组数据，而是获取ZoneAwarePromise 对象：

  async requestDataAndWait() {    
    let data = [];
    await this.http.getDataAsObservable()
      .toPromise().then(response => {data=response;} );
    return data
  }

这里是 Stackblitz 项目的链接： https://stackblitz.com/edit/angular-ivy-bygaut?file=src%2Fapp%2Fapp.component.ts

如何让requestDataAndWait返回data数组而不是ZoneAwarePromise对象？

Answer 1

您需要先更改 Service 类以返回这样的响应

getDataAsObservable(): Promise<any> {
 return this.http.get(this.jsonFile).toPromise()
}

然后像这样改变你的组件类

async onClick() {
 let result = await this.requestDataAndWait();
 console.log("result:", result);
}

async requestDataAndWait() {  
 return await this.http.getDataAsObservable();
}