Avoid creating a pyramid structure by connecting multiple observables only after ensuring that each one is fully completed

Question

Avoid creating a pyramid structure by connecting multiple observables only after ensuring that each one is fully completed

Utilizing rxjs, I am wondering if there is a way to trigger the next function only when the observable has completed. Rather than the nested structure below:

this.Start(data).subscribe(
    (data) => {
        console.log('next');
    },
    (err) => {
        console.log('err');
    },
    () => {
        console.log('complete');

        this.nextFunction()
        .subscribe(
            (data) => {
                console.log('next');
            },
            (err) => {
                console.log('err');
            },
            () => {
                console.log('complete');
                this.nextFunction2()
                .subscribe(
                    (data) => {
                        console.log('next');
                    },
                    (err) => {
                        console.log('err');
                    },
                    () => {
                        console.log('complete');
                        this.nextFunction3()
                        .subscribe(...)
                    }
                );
            }
        );
    }
);

Is there a way to handle it more elegantly like this:

this.Start(data).subscribe(
    (data) => {
        console.log('next');
    },
    (err) => {
        console.log('err');
    },
    () => {
        console.log('complete');
        return other observable;
    }
)
.then(
    (data) => {
        console.log('next');
    },
    (err) => {
        console.log('err');
    },
    () => {
        console.log('complete');
        return other observable;
    }
)
.then(
    (data) => {
        console.log('next');
    },
    (err) => {
        console.log('err');
    },
    () => {
        console.log('complete');
        return other observable;
    }
);

I aim to avoid creating a pyramid-like structure in my code.

javascript angular typescript rxjs observable

Answer 1

Answer №1

To chain observables one after the other, you can utilize the concat operator within RxJS:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/concat';
import 'rxjs/add/observable/defer';

Observable.concat(
  this.Start(data),
  Observable.defer(() => this.nextFunction()),
  Observable.defer(() => this.nextFunction2()),
  Observable.defer(() => this.nextFunction3()),
)
.subscribe();

The defer operator is used to delay obtaining subsequent observables.

If you want to add logging:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/concat';
import 'rxjs/add/observable/defer';
import 'rxjs/add/operator/do';

Observable.concat(
  this.Start(data).do(
    (value) => { console.log("next: Start:", value); },
    (error) => { console.log("error: Start:", error); },
    () => { console.log("completed: Start"); }
  ),
  Observable.defer(() => this.nextFunction().do(
    (value) => { console.log("next: nextFunction:", value); },
    (error) => { console.log("error: nextFunction:", error); },
    () => { console.log("completed: nextFunction"); }
  )),
  Observable.defer(() => this.nextFunction2().do(
    (value) => { console.log("next: nextFunction2:", value); },
    (error) => { console.log("error: nextFunction2:", error); },
    () => { console.log("completed: nextFunction2"); }
  )),
  Observable.defer(() => this.nextFunction3().do(
    (value) => { console.log("next: nextFunction3:", value); },
    (error) => { console.log("error: nextFunction3:", error); },
    () => { console.log("completed: nextFunction3"); }
  )),
)
.subscribe();

Answer 2

To chain observables one after the other, you can utilize the concat operator within RxJS:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/concat';
import 'rxjs/add/observable/defer';

Observable.concat(
  this.Start(data),
  Observable.defer(() => this.nextFunction()),
  Observable.defer(() => this.nextFunction2()),
  Observable.defer(() => this.nextFunction3()),
)
.subscribe();

The defer operator is used to delay obtaining subsequent observables.

If you want to add logging:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/concat';
import 'rxjs/add/observable/defer';
import 'rxjs/add/operator/do';

Observable.concat(
  this.Start(data).do(
    (value) => { console.log("next: Start:", value); },
    (error) => { console.log("error: Start:", error); },
    () => { console.log("completed: Start"); }
  ),
  Observable.defer(() => this.nextFunction().do(
    (value) => { console.log("next: nextFunction:", value); },
    (error) => { console.log("error: nextFunction:", error); },
    () => { console.log("completed: nextFunction"); }
  )),
  Observable.defer(() => this.nextFunction2().do(
    (value) => { console.log("next: nextFunction2:", value); },
    (error) => { console.log("error: nextFunction2:", error); },
    () => { console.log("completed: nextFunction2"); }
  )),
  Observable.defer(() => this.nextFunction3().do(
    (value) => { console.log("next: nextFunction3:", value); },
    (error) => { console.log("error: nextFunction3:", error); },
    () => { console.log("completed: nextFunction3"); }
  )),
)
.subscribe();

Avoid creating a pyramid structure by connecting multiple observables only after ensuring that each one is fully completed

Answer №1

Similar questions

Guide on dynamically changing the color of polymer 1.0 paper-button from an array of colors

Managing key presses with functions in VueJs

Sending an XMLHttpRequest in PHP causes a blank array to be returned

Cache for JSON Schema in VS Code

Setting up Redis for session store in the right way involves a few key steps

In a Typescript Next Js project, the useReducer Hook cannot be utilized

Managing incoming HTTP requests on LoopBack can be easily done by following these steps

Encountering a Lint error stating "Expected 2 arguments, but received 1" during the testing of the window.scrollBy() function in Jasmine following an Angular

Real-time changes may not be instantly reflected in the model update

The necessity of utilizing a dummy object for storing events in JavaScript is evident in certain situations

Information is being received, but unfortunately, it cannot be displayed

Switching website to mobile version when accessed on a handheld device

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Validating data for Telegram Web Bots using JavaScript

List component in Angular not refreshing after sorting the array in the service

Error: An unexpected token < was caught in the TypeScript Express code

The output is displaying an Object instead of a numerical value in JSON

Implementing data binding with rxjs and Angular 1.6: A step-by-step guide

Determine the dimensions of a div element in IE after adjusting its height to auto

What is the process for executing Express's scaffold by utilizing "nodemon" and the basic "node" command instead of relying on the "npm start" command?