This is a quick example showing how to wait for Promises to resolve with RxJS Observables, so that an Observable waits for a promise to resolve before emitting the next value or executing the next pipe()
operator.
The example shows five observable values that get emitted in sequence, each waiting two seconds for a Promise to resolve. It’s built with Angular but the RxJS code isn’t Angular specific and could be used with any front end framework (e.g. React, Vue etc).
The app component creates an observable sequence containing five string values using the RxJS of()
function.
The observable values are piped through two concatMap()
operators before being pushed to the users
array in the subscribe()
method to be rendered in the UI.
The concatMap()
operator is used in the example to convert promises into observables by passing it a function that returns a Promise. The concatMap()
operator runs each observable in sequence and waits for the previous observable to complete before continuing to the next one, if a Promise is returned in concatMap()
then it will wait for the promise to resolve before completing the observable.
NOTE: It’s also possible to convert a Promise to an Observable with the RxJS from()
operator, e.g. from(new Promise(resolve => setTimeout(() => resolve(value), 2000));)
.
import { Component } from '@angular/core';
import { of } from 'rxjs';
import { concatMap } from 'rxjs/operators';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
values = [];
constructor() {
// create observable that emits five values
const observable = of('Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5');
observable
.pipe(concatMap(value => {
console.log(`${value}: first pipe operator (before promise)`);
// return a promise that resolves with the specified value after 2 seconds
return new Promise(resolve => setTimeout(() => resolve(value), 2000));
}))
.pipe(concatMap(value => {
console.log(`${value}: second pipe operator (after promise resolved)`);
return of(value);
}))
.subscribe(value => this.values.push(value));
}
}
#rxjs #javascript #web-development #programming #developer