你能在 Angular 2（使用 Typescript）中返回一个 observable 作为 Promise 吗？ [复制]答案

【问题标题】：Can you return an observable as a promise in Angular 2 (Using Typescript)? [duplicate]你能在 Angular 2（使用 Typescript）中返回一个 observable 作为 Promise 吗？ [复制]
【发布时间】：2017-07-22 01:42:33
【问题描述】：

我正在学习使用 Angular 2 和 Typescript 在 Ionic 2 中进行开发。

我立即尝试创建一个函数，该函数返回一个承诺，该承诺在观察到的变量发生变化时得到解决。

这对于我在页面组件尝试使用提供程序之前检测何时完成初始化很有用。例如

api.isInitialized()
    .then(() => {
        //api provider is initialized. Now safe to call it!
        return api.fetch("NEWS");
    });
    .then((newsData) => {
        //do something with newsData
    });

我有以下进口：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Observable} from 'rxjs/Observable';

为了检查我对 toPromise 如何工作的理解，我尝试调用以下函数。我只得到“testObservable 已更改”。我也希望得到“解决的承诺”。

如何更改 testObservable 以产生已解决的承诺？

 observerTest(){
    let testObservable: any;
    let testObserver: any;

    testObservable = Observable.create(observer => {
        testObserver = observer;
    });

    let myPromise = testObservable.toPromise();

    testObservable.subscribe(data => {
        console.log("testObservable has changed.");
        console.log(data);
    });

    myPromise.then(() =>{
        console.log("promise resolved.");
    });

    testObserver.next(true);
}

【问题讨论】：

这不是因为您可以选择使用 .subscribe 将 observable 解析为 observable 还是使用 toPromise().then 的 promise 如果您同时执行这两种操作，则只有一个会在解决后被调用。
我发现用 testObserver.complete(); 替换最后一行给了我想要的行为。正如 Brandon 在回答问题 (stackoverflow.com/questions/38557214/…) 时提到的，“当 RxJs 将 Observable 转换为 Promise 时，它会创建一个 Promise，该 Promise 将从 observable 中产生最后一个值。因此，在底层 observable 完成之前，promise 不会解决。”

标签： angular typescript ionic2

【解决方案1】：

官方Angular tutorial 包含示例，尤其是在HTTP chapter 中。例如：

getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
           .toPromise()
           .then(response => response.json().data as Hero[])
           .catch(this.handleError);
}

和

delete(id: number): Promise<void> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
}

【讨论】：

【解决方案2】：

这就是你如何返回一个 Observable 作为一个 Promise。假设 api.fetch("NEWS") 返回一个 Observable。

test(){
    return new Promise(resolve => {
        api.fetch("NEWS")
        .subscribe(data => {
            resolve(data);
        },(err) => {
            resolve(err);
        });
    });
}

而在调用方你将把它当作承诺来处理：

provider.test().then(data => {
    console.log("Data : ",data);
}).catch(err => {
    console.log("Error : ",err);
});

不过，我不确定，您为什么要返回 Observable 作为承诺？

1 用例可能是 - 已经有很多调用方法被编写用于接收来自提供者的承诺。现在，突然一个提供者代码返回一个 Observable 而不是一个 Promise。

否则，通过 .subscribe() 处理 Observable 和通过 .then() 从调用方法处理 Promise 会更简单。

【讨论】：