RxJs 7 operator ‘toPromise’ deprecated. Alternatives!

The helper function toPromise, with which we could convert an Observable to a Promise it has been deprecated in version 7 of RxJs.

We have several ways to achieve the same.

Before starting, a small note that will be useful for the examples.

A promise resolves to a given value, and that value can be anything, even undefined or null.

Let’s see 2 examples.

In the official RxJs documentation we can see that we have at our disposal two new helper functions for the conversion of observables to promises.

firstValueFrom

Converts an observable to a promise by subscribing to the observable,
and returning a promise that will resolve as soon as the first value arrives from the observable. The subscription will then be closed.

firstValueFrom(of('value')).then((response: string) => {
  console.log('Promise completed: ', response);
});

Output: value

Taking into account the above note, what would happen if we work with a data stream with several results and the first has an undefined value that we are not expecting?

firstValueFrom(of(undefined, 'value')).then((response: string) => {
  console.log('Promise completed: ', response);
});

Output: undefined

This can be avoided by filtering the data stream we work with.

firstValueFrom(of(undefined, 'value')
.pipe(filter((res) => !!res))).then(
  (response: string) => {
    console.log('Promise completed: ', response);
  }
);

Output: value

lastValueFrom

Converts an observable to a promise by subscribing to the observable,
waiting for it to complete, and resolving the returned promise with the last value from the observed stream.

This is the equivalent function to the obsolete toPromise.

lastValueFrom(of('value', 'value2')).then((response: string) => {
  console.log('Promise completed: ', response);
});

Output: value2

lastValueFrom will resolve the promise with the last value emitted by the Observable and only when the stream is complete.

What would happen if we work with a non-finite data stream such as a Subject or BehaviorSubject?

const subject = new BehaviorSubject('value');
lastValueFrom(subject).then((response: string) => {
  console.log('Promise completed: ', response);
});

Output: nothing

Remember that lastValueFrom subscribes to the observable waiting for it to complete. So we would have to complete the subject in order to receive any value.

const subject = new BehaviorSubject('value');
lastValueFrom(subject).then((response: string) => {
  console.log('Promise completed: ', response);
});
subject.complete();

Both functions have a second parameter config, an object with a defaultValue property to use when the source is completed without emitting any value.

const subject = new Subject();
lastValueFrom(
  subject,
  { defaultValue: 'defaultValue' }
).then((response: string) => {
  console.log('Promise completed: ', response);
});
subject.complete();

Output: defaultValue

You can play around with a few examples in the following stackblitz playground.

I hope this post will help someone :).