webentwicklung-frage-antwort-db.com.de

Versprechen in beobachtbares umwandeln

Ich versuche, den Kopf um Observables zu legen. Ich liebe die Art und Weise, wie Observables Entwicklungs- und Lesbarkeitsprobleme lösen. Wenn ich lese, sind die Vorteile immens. 

Observables auf HTTP und Sammlungen scheinen unkompliziert zu sein. Wie kann ich so etwas in ein beobachtbares Muster umwandeln?.

Dies ist von meiner Servicekomponente, um Authentifizierung bereitzustellen. Ich würde es vorziehen, wie andere HTTP-Dienste in Angular2 zu arbeiten - mit Unterstützung für Daten-, Fehler- und Fertigstellungshandler.

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

Jede Hilfe hier wäre sehr dankbar. Die einzige alternative Lösung, die ich hatte, war, EventEmitters zu erstellen. Aber ich denke, das ist eine schreckliche Möglichkeit, Dinge im Serviceabschnitt zu erledigen

angularfirebasefirebase-authentication
95
Krishnan Sriram

Wenn Sie RxJS 6.0.0 verwenden:

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

versuche dies:

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

sie finden vollständige Referenz zum fromPromise-Operator hier

105
Godfather

von

Verwenden Sie from , um ein Versprechen direkt in ein Observable zu konvertieren. from wartet sofort auf die Auflösung des Versprechens. 

import { from } from 'rxjs';

const observable = from(promise);

verschieben

Verwenden Sie defer mit einer Promise-Factory-Funktion als Eingabe, um die Erstellung und Konvertierung eines Promise in ein Observable zu verzögern. 

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));

Der Unterschied zu from besteht darin, dass defer auf einen Abonnenten wartet und erst dann durch Aufruf der angegebenen Promise-Factory-Funktion ein neues Observable generiert. Das innere Versprechen wird also nur "ausgeführt", wenn jemand das Beobachtbare abonniert, und nicht direkt, wenn das Beobachtbare erstellt wird, wie dies bei from der Fall ist. Jeder Abonnent erhält auch ein neues Observable.

Der Unterschied zwischen from und defer in einem Beispiel: https://stackblitz.com/edit/rxjs-xcudxb

2
fridoo

Sie können auch ein Betreff verwenden und dessen next () -Funktion aus einem Versprechen auslösen. Siehe Beispiel unten:

Code wie unten hinzufügen (ich habe den Service genutzt)

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

  }
}

Benutzer aus Komponente wie unten erstellen

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