TypeScript - 等待 observable/promise 完成，然后返回 observable

Question

我对 TypeScript 和 RxJS 很陌生，我试图在另一个 Observable 完成后返回一个 Observable ：

 public myObservable = () : Observable<boolean> => {
    console.log('retrieving the token in DB');
    return Observable.create(observer => {
        setTimeout(() => {
            observer.next(true);
            observer.complete();
        }, 5000);
    });
}

public makeRequest = (): Observable<any> => {
    return this.myObservable().subscribe(
        function (x) {
            console.log('I have the token, now I can make the HTTP call');

            return this.http.get('http://jsonplaceholder.typicode.com/posts/1')
                .map( (responseData) => {
                    return responseData.json();
                })
                .map((item:any) => {
                    return {
                        id: item.id,
                        userId: item.userId,
                        title: item.title,
                        body: item.body
                    };
                });

        },
        function (err) {
            console.error('Error: ' + err);
        },
        function () {
            console.log('Completed');
        });

}

我收到此错误：“返回的表达式类型订阅不可分配给类型 Observable<any> ”。

我完全理解这里的错误 （Observable 就像一个流，订阅是“观察”该流的事实） ，但我不知道如何“等待”一个 Observable （或一个承诺） 完成返回一个新的 Observable 。我怎样才能做到这一点？

原文由 Geoffrey D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是我们将 observable 转换为不同的类型……使用 .subscribe - 而我们不应该（它不返回 observable）

 public makeRequest = (): Observable<any> => {
    return this.myObservable().subscribe(
      ... // this is wrong, we cannot return .subscribe
          // because it consumes observable and returns ISusbcriber
    );
}

当我们有一个可观察的……我们应该只取它的结果并使用 .map 将其转换为其他东西

FlatMap 运算符

将 Observable 发射的项目转换为 Observable，然后将这些项目的发射扁平化为单个 Observable

 public makeRequest = (): Observable<any> => {
    return this.myObservable()
       .flatmap((x) => return this.http
              .get('http://jsonplaceholder.typicode.com/posts/1')
              .map( (responseData) => {
                    return responseData.json();
              })
              ...

在此处查看所有详细信息

利用 Angular 2 中的观测值

原文由 Radim Köhler 发布，翻译遵循 CC BY-SA 3.0 许可协议