angular - observables - Convertir promesa a observable

rxjs observable angular

Question

Estoy tratando de entender mis observables. Me encanta la forma en que los observables resuelven los problemas de desarrollo y legibilidad. Mientras leo, los beneficios son inmensos.

Los observables en HTTP y las colecciones parecen ser sencillos. ¿Cómo puedo convertir algo como esto en un patrón observable?

Esto es de mi componente de servicio, para proporcionar autenticación. Prefiero que esto funcione como otros servicios HTTP en Angular2, con soporte para manejadores de datos, errores y finalización.

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;
             // ...
        });

Cualquier ayuda aquí sería muy apreciada. La única solución alternativa que tuve fue crear EventEmitter s. Pero supongo que es una forma terrible de hacer cosas en la sección de servicios

Answer 1

desde

Use from para convertir directamente una Promesa creada previamente en un Observable.

import { from } from ''rxjs'';

const observable = from(promise);

Como la Promesa interna ya se ha creado (o se creará al mismo tiempo que el Observable), el cuerpo de la Promesa se está ejecutando o ya se ha resuelto a medida que se crea el Observable. Si la promesa interna ya ha resuelto, un nuevo suscriptor del observable obtendrá su valor de inmediato.

aplazar

Use defer con una función de fábrica Promesa como entrada para diferir la creación y conversión de una Promesa en un Observable.

import { defer } from ''rxjs'';

// getPromise has no parameters and returns a Promise
const observable = defer(getPromise)

// getPromise has parameters and returns a Promise
const observable = defer(() => getPromise(myParameters));

La diferencia de from es que el defer espera a un suscriptor y solo entonces crea una nueva Promesa llamando a la función de fábrica Promise dada. Esto es útil cuando desea crear un Observable pero no desea que la Promesa interna se ejecute de inmediato. La Promesa interna solo se ejecutará cuando alguien se suscriba al Observable. Cada suscriptor también obtendrá su propio Observable nuevo.

La diferencia entre y defer en un ejemplo: https://stackblitz.com/edit/rxjs-yye14a

Answer 2

Si está utilizando RxJS 6.0.0:

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

Answer 3

También puede usar un Asunto y activar su función next () desde la promesa. Ver muestra a continuación:

Agregue el código como a continuación (utilicé el servicio)

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);
          // ...
        });
    }

  }
}

Crear usuario desde componente como a continuación

class UserComponent {
  constructor(private userService: UserService) {
    this.userService.createUserWithEmailAndPassword().subscribe(user => console.log(user), error => console.log(error);
    }
  }

Answer 4

prueba esto:

var subscription = Observable.fromPromise(
    firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
                       error => /* Handle error here */);

Puede encontrar una referencia completa del operador de Promise here