你可以使用 from
和 switchMap
操作符将一个 Promise 和内部的 Observable 转换为一个单独的 Observable 返回。
下面是一个使用 Angular 和 RxJS 的示例代码:
import { Component, OnInit } from '@angular/core';
import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: '{{ data$ | async }}',
})
export class ExampleComponent implements OnInit {
data$: Observable;
ngOnInit() {
this.data$ = this.getData();
}
getData(): Observable {
const promise = this.getDataFromPromise();
return from(promise).pipe(
switchMap((result) => this.getDataFromObservable(result))
);
}
getDataFromPromise(): Promise {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data from Promise');
}, 1000);
});
}
getDataFromObservable(data: any): Observable {
return new Observable((observer) => {
setTimeout(() => {
observer.next(`${data} + Data from Observable`);
observer.complete();
}, 1000);
});
}
}
在这个例子中,getData
方法将使用 from
操作符将 Promise 转换为 Observable,然后使用 switchMap
操作符将 Promise 的结果作为参数传递给内部的 Observable。最后,data$
属性将订阅返回的 Observable。
在模板中,你可以使用 async
管道来订阅 data$
Observable 并展示数据。
这样,当组件初始化时,data$
Observable 将发出 "Data from Promise + Data from Observable" 字符串,并将其显示在模板中。