Convert Promise to Observable
Solution 1
If you are using RxJS 6.0.0:
import { from } from 'rxjs';
const observable = from(promise);
Solution 2
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(() => 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]) => 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<T> = SubscribableOrPromise<T> | ArrayLike<T> | Iterable<T>;
// Note the PromiseLike ----------------------------------------------------v
type SubscribableOrPromise<T> = Subscribable<T> | Subscribable<never> | PromiseLike<T> | InteropObservable<T>;
The difference between from
and defer
in an example: https://stackblitz.com/edit/rxjs-6rb7vf
const getPromise = val => new Promise(resolve => {
console.log('Promise created for', val);
setTimeout(() => 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(() => getPromise('DEFER'));
fromPromise$.subscribe(console.log);
// the execution of getPromise('DEFER') starts here, when you subscribe to deferPromise$
deferPromise$.subscribe(console.log);
defer
is probably the operator most people are looking for as many apps rely on Observables to be cold and trigger a data fetch on subscribe. from
is still a viable option for certain use cases though, e.g. when you want to create a Promise once during some initialisation process and then propagate its value via an Observable that will be subscribed to multiple times, but don't want to create and execute the Promise again for every subscriber.
Solution 3
try this:
import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";
const subscription = Observable.fromPromise(
firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
error => /* Handle error here */);
you can find complete reference to fromPromise operator here.
Solution 4
The correct pattern to transform a promise into an observable is using defer
and from
operators:
import { defer, from } from 'rxjs';
const observable$ = defer(() => from(myPromise()));
Why we need the defer
operator?
Promises are eager, this means that when called they fire instantly. This is the opposite from how observables work. Observables are lazy, they are only fired when .subscribe()
is called. This is the reason we need to always wrap it into a defer
operator. The from
operator doesn't do this work, so defer
is always needed.
Solution 5
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<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);
}
)
Krishnan Sriram
Updated on December 03, 2021Comments
-
Krishnan Sriram over 2 years
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
EventEmitter
s. But I guess that's a terrible way to do things in services section -
polkovnikov.ph over 5 yearsSubjects are low-level machinery. Don't use subjects, except for the cases when you're extending
rxjs
. -
Shivang Gupta over 5 yearsI am just giving a solution.
-
polkovnikov.ph over 5 yearsYou could have at least shown
new Observable(observer => { ... observer.next() ... })
way to implement it. Even though it would be a reimplementation of existing well-known function, it would directly answer the question and wouldn't be harmful to readers. -
Laxmikant Dange over 5 yearsUsing 6.3.3,
from
method returning observable but it is sending promise as value to subscriptions. :( -
Starscream over 4 yearsI think that difference is capital, thanks for pointing it out.
-
VSO over 4 yearsThis answer is corrext for RXJS 6+. I tried to import from
operators
via "intuition" - I was wrong. -
BobbyTables almost 4 yearsThanks for sharing that many operators accept promises directly! TIL
-
janw over 3 yearsWhile this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.
-
helhum over 3 yearsThank you very much for this detailed writeup! It not only helped me to solve my problem, but also helped me to better understand the concepts.
-
Torsten Barthel over 2 yearsThe operator is asking the opposite
-
Llorenç Pujol Ferriol over 2 yearsThis answer is not correct, it would work only sometimes. Promises are eager, and observables are lazy (don't start until subscribe). With this solution, the promise has already started even there is no '.subscribe()', so it does not behave like an observable. See answer stackoverflow.com/a/69360357/6099651 for a better solution.