A comparison between RXJS5 and Promise.all

Question

A comparison between RXJS5 and Promise.all

Is there a Promise.all equivalent in this situation?

let promise1 = performTaskA(); // some promise
let promise2 = performTaskB(); // another promise

// wait for both promises to complete.
Promise.all([promise1, promise2], data => {
    // do something;
});

I can't seem to figure it out from the documentation. Some articles mention ForkJoin, but I'm having trouble making it work...

let source1 = new BehaviorSubject(0);
let source2 = new BehaviorSubject(1);
let combinedObservable = new ForkJoinObservable(source1, source2);

source1.subscribe( () => console.log('I am working'));
source2.subscribe( () => console.log('I am working'));
combinedObservable.subscribe( () => console.log('I am not working'));

Maybe I should just go back to using plain old promises.

javascript rxjs5

Answer 1

Answer №1

Rx.Observable provides a handy toArray function that mimics the behavior of Promise.all: it gathers all values emitted by the stream and waits for the stream to complete before emitting a single item containing all the values:

// Instead of relying on Promises, we can use observables for asynchronous actions
const task1$ = Rx.Observable.of(1);
const task2$ = Rx.Observable.of(2);

// Merge all tasks into one stream
const combined$ = Rx.Observable.merge(task1$, task2$)

// Use toArray to collect all results
combined$
    .toArray()
    .subscribe(result => console.log(result));
// >> [1, 2]

Answer 2

Rx.Observable provides a handy toArray function that mimics the behavior of Promise.all: it gathers all values emitted by the stream and waits for the stream to complete before emitting a single item containing all the values:

// Instead of relying on Promises, we can use observables for asynchronous actions
const task1$ = Rx.Observable.of(1);
const task2$ = Rx.Observable.of(2);

// Merge all tasks into one stream
const combined$ = Rx.Observable.merge(task1$, task2$)

// Use toArray to collect all results
combined$
    .toArray()
    .subscribe(result => console.log(result));
// >> [1, 2]

Answer 3

Answer №2

import Rx, { Observable } from 'rxjs' 
import axios from 'axios'

const userPromise1 = axios.get('https://jsonplaceholder.typicode.com/users/1')
    , userPromise2 = axios.get('https://jsonplaceholder.typicode.com/users/2')

const userStream$ = Observable   
       .of(userPromise1, userPromise2)       
       .flatMap(promise=>promise)    
       .map(response=>response.data)   
       .map(user=>user.name)   
       .subscribe(
           name=>console.log(`Displaying name: ${name}`)
           // Displaying name: Ervin Howell
           // Displaying name: Leanne Graham   
       )

flatMap(promise=>promise) is a technique to automatically resolve promises

Answer 4

import Rx, { Observable } from 'rxjs' 
import axios from 'axios'

const userPromise1 = axios.get('https://jsonplaceholder.typicode.com/users/1')
    , userPromise2 = axios.get('https://jsonplaceholder.typicode.com/users/2')

const userStream$ = Observable   
       .of(userPromise1, userPromise2)       
       .flatMap(promise=>promise)    
       .map(response=>response.data)   
       .map(user=>user.name)   
       .subscribe(
           name=>console.log(`Displaying name: ${name}`)
           // Displaying name: Ervin Howell
           // Displaying name: Leanne Graham   
       )

flatMap(promise=>promise) is a technique to automatically resolve promises

Answer 5

Answer №3

An alternative approach is to utilize the toPromise method:

Promise.all([behaviour1.toPromise(), behaviour2.toPromise()])

The toPromise function generates a promise that resolves upon completion of the observable.

For cases where observables emit multiple values before completion, operations like zip, combineLatest and withLatestFrom may be more suitable:

zip

Each value from behavior1 aligns with a corresponding value from behavior2. If either source depletes its values, processing pauses until new values are available.

Observable.zip(behavior1, behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

combineLatest

Similar to zip, but emits a value whenever behavior1 or behavior2 produces an output, utilizing the latest value from the other observable.

Observable.combineLatest(behavior1, behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

withLatestFrom

Comparable to combineLatest, but only one observable dictates emission timings.

behavior1.withLatestFrom(behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

Answer 6

An alternative approach is to utilize the toPromise method:

Promise.all([behaviour1.toPromise(), behaviour2.toPromise()])

The toPromise function generates a promise that resolves upon completion of the observable.

For cases where observables emit multiple values before completion, operations like zip, combineLatest and withLatestFrom may be more suitable:

zip

Each value from behavior1 aligns with a corresponding value from behavior2. If either source depletes its values, processing pauses until new values are available.

Observable.zip(behavior1, behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

combineLatest

Similar to zip, but emits a value whenever behavior1 or behavior2 produces an output, utilizing the latest value from the other observable.

Observable.combineLatest(behavior1, behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

withLatestFrom

Comparable to combineLatest, but only one observable dictates emission timings.

behavior1.withLatestFrom(behavior2)
  .subscribe(([b1, b2]) => console.log(b1, b2))

References: Documentation, Interactive illustration

A comparison between RXJS5 and Promise.all

Answer №1

Answer №2

Answer №3

zip

combineLatest

withLatestFrom

Similar questions

Issue encountered while configuring 'innerHTML' in xmlHttp.onreadystatechange function

React Component State in JavaScript is a crucial aspect of building

Implementing authentication with JSONP requests in Angular

Instructions on configuring the oddslib JavaScript library

Trouble with executing a jQuery dynamic loop for each item

Execute the file separately using dot.js

Using AJAX to transform octet-stream into typed array (Float64Array)

Building a dynamic web form using JSP and Angular for the JEE platform

Transmit data to Angular components using the router functionality

Div sliding out of view

Want to make your JS loop lightning fast?

Error message: Incorrect XMP data detected within PhotoSphereViewer" and "WebGL issue: INVALID_VALUE error when attempting to load faulty image data

Passing parameters as an array in Angular can be done by using the format: ?category[]=1&category[]=2&category[]=3,

How can you implement div slide animations using AngularJS?

Experiencing a lack of defined information when using a service

Using a Function to Retrieve Styles in React Native for Android

Generating an embedded object on the fly using an Angular Directive

How can I display a timer icon in front of text on a Material-UI CardHeader subtitle?

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

How can I add a blank selection at the bottom of my ng-options dropdown?