获取在 http 调用承诺中返回的数据的 Rxjs Observable答案

【问题标题】：Getting Rxjs Observable of data returned in http call promise获取在 http 调用承诺中返回的数据的 Rxjs Observable
【发布时间】：2018-02-03 00:59:09
【问题描述】：

我正在尝试使用 ngx-pagination，但遇到的问题很少。我对 Angular 2 很陌生，对可观察对象和订阅者了解不多。

我有一个服务可以进行 http 调用并返回数据：

getData(path: string, page: number=1) : Promise<IData[]> {

  return this.http.get(path+'&pageNumber='+page)
                    .toPromise()
                    .then(response => {
                        return response.json() as IData[];
                    });
}

我正在我的组件中使用这些数据：

getDataValues(page: number) {
    this.loading = true;
    this.asyncData = this.getAsyncData(this.queryPath, page)
        .do(res => {
            this.total = res.total;
            this.p = page;
            this.loading = false;
        })
        .map(res => res.items);
}

getAsyncData(path: string, page: number): Observable<any> {
     return Observable
    .of({
        items: this.repository.getData(path, page),
        total: this.dataValues.length
    });
}

我的模板如下所示：

<div class="list">
<div>
    <article class="entity" *ngFor="let data of asyncData | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">

    </article>
</div>
<pagination-controls (pageChange)="getDataValues($event)" id="server"></pagination-controls>

我知道这是不正确的，因为我需要等待承诺解决，但我不知道该怎么做。 ngx-pagination 期望 Observable 所以asyncData 需要是Observable

【问题讨论】：

当你混合 observables 和 Promise 时，控制流会变得混乱。通常，当开发人员对 RxJS 不够熟悉时，就会发生这种情况。不要这样做，除非你真的需要这个并坚持共同点（observables）。顺便说一句，上面的代码不会按预期工作，在 getAsyncData 中，预计 items 是值，但它们是值的承诺（或值的可观察值，如果你将摆脱 toPromise，如答案所示）。

标签： angular promise rxjs angular-promise angular2-observables

【解决方案1】：

如果您查看旧 Angular http 服务的“get”方法的类型签名（您正在使用的那个，较新的称为 HttpClient），您会看到它返回一个类型为“响应”的 Observable '。

 get(url: string, options?: RequestOptionsArgs): Observable<Response>;

因此，只需从 get 调用中删除 .toPromise() 和 .then 方法，就可以得到 Observable。

【讨论】：