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。我该怎么做？

Answer 1

有些日子我正在寻找这个答案，因为这也是我的问题。今天我有了答案，想分享一下。

代码是：

ngOnInit() {
var idEntidade: number;

this.route.paramMap.subscribe(params => {
  idEntidade = Number(params.get('id'));
});

this.dataService.getEstados().subscribe(data => {
  this.estados = data;
});

var dados = this.dataService.getCliente(idEntidade);

**this.subscription = dados.subscribe(
  (data: Cliente) => { this.entityForm.patchValue(data);},
  null,
  () => { this.completed(); }
  );**
}

并且完成的函数会在订阅完成后执行。

completed(){
let idEstado: number = this.entityForm.controls['estadoId'].value;

if (idEstado === null) {
  return;
}

this.dataService.getMunicipiosByEstado(this.entityForm.controls['estadoId'].value)
    .subscribe(data => { this.municipios = data; });
}

希望这会有所帮助。

Answer 2

虽然 flatMap() 可能会起作用，但由于您没有传入使用的参数 [参见 param (x)]，因此在这种情况下使用的最佳运算符是 forkJoin()。

请看这个例子：https://stackoverflow.com/a/38049268/1742393

   Observable.forkJoin(
    this.http.get('/app/books.json').map((res:Response) => res.json()),
    this.http.get('/app/movies.json').map((res:Response) => res.json())
).subscribe(
  data => {
    this.books = data[0]
    this.movies = data[1]
  },
  err => console.error(err)
);

Answer 3

问题是我们将 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
    );
}

当我们有一个 observable 时......我们应该只获取它的结果并使用 .map 将其转换为其他东西

FlatMap operator

将 Observable 发出的项目转换为 Observables，然后 将这些排放量扁平化为单个 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();
              })
              ...

在这里查看所有详细信息

TAKING ADVANTAGE OF OBSERVABLES IN ANGULAR 2