我正试着理清思路。我喜欢可观察对象解决开发和可读性问题的方式。正如我读到的,好处是巨大的。

HTTP和集合上的可观察对象似乎很直接。我怎么把这样的东西转换成可观察的模式。

这来自我的服务组件,用于提供身份验证。我希望它能像Angular2中的其他HTTP服务一样工作——支持数据、错误和完成处理程序。

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(firebaseUser) {
    // do something to update your UI component
    // pass user object to UI component
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

如果有任何帮助,我将不胜感激。我拥有的唯一替代解决方案是创建eventemitter。但我想在服务部门这样做是很糟糕的


当前回答

你可以为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);
   }
)

其他回答

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

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

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

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

import { from } from 'rxjs';

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

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

您还可以使用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(错误); } }

如果你使用的是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);
   }
)