Convert Promise to Observable

Question

I am trying to wrap my head around observables  I love the way observables solve development and readability issues  As I read  benefits are immense    Observables on HTTP and collections seem to be straight forward  How can I convert something like this to observable pattern   This is from my service component  to provide authentication  I d prefer this to work like other HTTP services in Angular2 - with support for data  error and completion handlers   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                     Any help here would be much appreciated  The only alternative solution I had was to create EventEmitters  But I guess that s a terrible way to do things in services section

User · Answer

import   from   from  rxjs    from firebase auth   createUserWithEmailAndPassword email  password    subscribe  user  any    gt          console log  test         Here is a shorter version using a combination of some of the answers above to convert your code from a promise to an observable

User · Answer

try this   import  rxjs add observable fromPromise   import   Observable   from  rxjs Observable    const subscription   Observable fromPromise      firebase auth   createUserWithEmailAndPassword email  password     subscription subscribe firebaseUser   gt     Do anything with data received                            error   gt     Handle error here        you can find complete reference to fromPromise operator here

User · Answer

You can add a wrapper around promise functionality to return an Observable to observer    Creating a Lazy Observable using defer   operator which allows you to create the Observable only when the Observer subscribes    import   of  Observable  defer   from  rxjs    import   map   from  rxjs operators     function getTodos     Observable lt any gt      return defer     gt       return fetch  https   jsonplaceholder typicode com todos 1          then response   gt  response json           then json   gt            return json                    getTodos      subscribe      next   gt        console log  Data is    next

User · Answer

You may also use defer  The main difference is that the promise is not going to resolve or reject eagerly

User · Answer

You can also use a Subject and trigger its next   function from promise  See sample below   Add code like below   I used service     x000D   x000D  class UserService   x000D    private createUserSubject  Subject  lt  any  gt    x000D   x000D    createUserWithEmailAndPassword     x000D      if  this createUserSubject    x000D        return this createUserSubject  x000D        else   x000D        this createUserSubject   new Subject  lt  any  gt      x000D        firebase auth   createUserWithEmailAndPassword email  x000D            password  x000D           then function firebaseUser    x000D               do something to update your UI component x000D               pass user object to UI component x000D            this createUserSubject next firebaseUser   x000D             x000D           catch function error    x000D               Handle Errors here  x000D            var errorCode   error code  x000D            var errorMessage   error message  x000D            this createUserSubject error error   x000D                   x000D              x000D        x000D   x000D      x000D    x000D   x000D   x000D    Create User From Component like below   x000D   x000D  class UserComponent   x000D    constructor private userService  UserService    x000D      this userService createUserWithEmailAndPassword   subscribe user   gt  console log user   error   gt  console log error   x000D        x000D      x000D   x000D   x000D

User · Answer

1 Direct Execution   Conversion Use from to directly convert a previously created Promise to an Observable   import   from   from  rxjs       getPromise   is called once  the promise is passed to the Observable const observable    from getPromise      observable  will be a hot Observable that effectively replays the Promises value to Subscribers  It s a hot Observable because the producer  in this case the Promise  is created outside of the Observable  Multiple subscribers will share the same Promise  If the inner Promise has been resolved a new subscriber to the Observable will get its value immediately  2 Deferred Execution On Every Subscribe Use defer with a Promise factory function as input to defer the creation and conversion of a Promise to an Observable  import   defer   from  rxjs       getPromise   is called every time someone subscribes to the observable  const observable    defer      gt  getPromise      observable  will be a cold Observable  It s a cold Observable because the producer  the Promise  is created inside of the Observable  Each subscriber will create a new Promise by calling the given Promise factory function  This allows you to create an observable  without creating and thus executing a Promise right away and without sharing this Promise with multiple subscribers  Each subscriber to observable  effectively calls from promiseFactory    subscribe subscriber   So each subscriber creates and converts its own new Promise to a new Observable and attaches itself to this new Observable  3 Many Operators Accept Promises Directly Most RxJS operators that combine  e g  merge  concat  forkJoin  combineLatest      or transform observables  e g  switchMap  mergeMap  concatMap  catchError      accept promises directly  If you re using one of them anyway you don t have to use from to wrap a promise first  but to create a cold observable you still might have to use defer      Execute two promises simultaneously forkJoin getPromise 1   getPromise 2   pipe    switchMap   v1  v2     gt  v1 getPromise v2      map to nested Promise    Check the documentation or implementation to see if the operator you re using accepts ObservableInput or SubscribableOrPromise  type ObservableInput lt T gt    SubscribableOrPromise lt T gt    ArrayLike lt T gt    Iterable lt T gt      Note the PromiseLike ----------------------------------------------------v type SubscribableOrPromise lt T gt    Subscribable lt T gt    Subscribable lt never gt    PromiseLike lt T gt    InteropObservable lt T gt     The difference between from and defer in an example  https   stackblitz com edit rxjs-6rb7vf const getPromise   val   gt  new Promise resolve   gt      console log  Promise created for   val     setTimeout      gt  resolve  Promise Resolved    val     5000           the execution of getPromise  FROM   starts here  when you create the promise inside from const fromPromise    from getPromise  FROM     const deferPromise    defer      gt  getPromise  DEFER      fromPromise  subscribe console log      the execution of getPromise  DEFER   starts here  when you subscribe to deferPromise  deferPromise  subscribe console log

User · Answer

If you are using RxJS 6 0 0   import   from   from  rxjs   const observable   from promise

[angular] Convert Promise to Observable

Examples related to angular

Examples related to firebase

Examples related to rxjs

Examples related to firebase-authentication