将promise转换为可观察对象的正确模式是使用defer和from操作符:

import { defer, from } from 'rxjs';
    
const observable$ = defer(() => from(myPromise()));

为什么我们需要延迟运算符?

承诺是热切的，这意味着一旦被召唤，它们就会立即开火。这与可观察对象的工作原理相反。可观察对象是懒惰的，它们只在调用.subscribe()时被触发。这就是为什么我们总是需要把它包装成一个延迟运算符的原因。from操作符不做这项工作，所以总是需要defer。

您还可以使用Subject并从promise触发它的next()函数。请看下面的例子:

添加如下代码(我使用的是service)

class UserService { private createUserSubject: Subject < any > ; createUserWithEmailAndPassword() { if (this.createUserSubject) { return this.createUserSubject; } else { this.createUserSubject = new Subject < any > (); firebase.auth().createUserWithEmailAndPassword(email, password) .then(function(firebaseUser) { // do something to update your UI component // pass user object to UI component this.createUserSubject.next(firebaseUser); }) .catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; this.createUserSubject.error(error); // ... }); } } }

从组件创建用户，如下所示

UserComponent { 构造函数(私有userService: userService) { this.userService.createUserWithEmailAndPassword()。订阅(用户=> console.log(用户)，错误=> console.log(错误); ｝ ｝

import { from } from 'rxjs';

from(firebase.auth().createUserWithEmailAndPassword(email, password))
.subscribe((user: any) => {
      console.log('test');
});

下面是一个简短的版本，结合了上面的一些答案，将你的代码从承诺转换为可观察对象。

如果你使用的是RxJS 6.0.0:

import { from } from 'rxjs';
const observable = from(promise);

你可以为promise功能添加包装器，将Observable返回给观察者。

使用defer()操作符创建一个Lazy Observable，它允许你只在观察者订阅时创建Observable。

import { of, Observable, defer } from 'rxjs'; 
import { map } from 'rxjs/operators';


function getTodos$(): Observable<any> {
  return defer(()=>{
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        return json;
      })
  });
}

getTodos$().
 subscribe(
   (next)=>{
     console.log('Data is:', next);
   }
)

Rxjs提供了toPromise()运算符， 如代码示例所示:

@Injectable({
  providedIn: 'root'
})
export class InventoryService {
  constructor(private httpClient: HttpClient) {}

  getCategories(): Observable<Category[]> {
    const url = 'https://www.themealdb.com/api/json/v1/1/categories.php';

    return this.httpClient.get<CategoriesResponse>(url).pipe(
      map(response => response.categories)
    );
  }
}

在你的组件中，你可以应用toPromise()操作符:

export class AppComponent {
  categories: any[];

  constructor(private inventoryService: InventoryService) {}

  public async loadCategories() {
    this.categories = await this.inventoryService
      .getCategories()
      .**toPromise()**

但目前Rxjs7+已弃用，建议使用lastValueFrom()操作符:

  public async loadCategories() {
    const categories$ = this.inventoryService.getCategories();
    this.categories = await **lastValueFrom**(categories$);
  }

我希望它对更新版本的更新代码有所帮助:')