Angular 2: Patience is a Virtue When Dealing with Observables

Question

Angular 2: Patience is a Virtue When Dealing with Observables

Dealing with multiple asynchronous calls can be tricky, especially when you need to wait for all of them to finish before moving on to the next step. In my case, I have separate calls that may or may not be made depending on user input. How can I efficiently handle this situation?

submitButton_Clicked() {
  this.busy = this.service.call1() // must be called
    .first().subscribe(
      if (success){

        // **Logic to decide if call 2 is needed**
        ...

        this.busy = this.service.call2() // might be called
          .first().subscribe();

        // **Logic to decide if call 3 is needed**
        ...

        this.busy = this.service.call3() // might be called
          .first().subscribe();

        this.router('route'); // should route after all potential calls
      }
    );   
}

As I'm still learning about observables, I'm a bit unsure about the best approach to solve this. Any guidance would be greatly appreciated. Thank you!

angular typescript rxjs observable

Answer 1

Answer №1

To utilize flatMap, you can:

let Observable = Rx.Observable;

let f = Observable.of(20).delay(1000);
let g = f.map(x => x*x)
  .flatMap(x => Observable.of(x + 100));

g.subscribe(console.log);


/** 
 * Rx.Observable.prototype.flatMap 
 * and Rx.Observable.prototype.selectMany 
 * are equivalent.
 */

let h = f.map(x => x*3)
  .delay(1000)
  .flatMap(x => Observable.of(x + 100));
h.subscribe(console.log);

https://jsbin.com/vokofug/edit?js,console,output

Alternatively, you can use concat or merge:

The concat() stream will display values from source1 first, then from source2 after source1 completes.

The merge() stream will display values from source1 and source2 as they are emitted, not waiting for the first stream to complete before emitting values from the second.

http://codepen.io/SitePoint/pen/PzKdVQ

'use strict';

const source1 =
  Rx.Observable.interval(100)
    .map(val => `Source 1: ${val}`)
    .take(5);

const source2 =
  Rx.Observable.interval(100)
    .map(val => `Source 2: ${val * 10}`)
    .take(5);

const concat_table = $('#concat-table-body'),
      merge_table  = $('#merge-table-body');

source1
  .concat(source2)
  .subscribe(value => {
    const row = document.createElement('tr');
    row.innerHTML = value;

    // Source 1 values populate BEFORE Source 2 
    concat_table.append(row);
  });

source1
  .merge(source2)
  .subscribe(value => {
    const row = document.createElement('tr');
    row.innerHTML = value;

    // Source 1 values INTERLEAVE with Source 2
    merge_table.append(row);
  });

Answer 2

To utilize flatMap, you can:

let Observable = Rx.Observable;

let f = Observable.of(20).delay(1000);
let g = f.map(x => x*x)
  .flatMap(x => Observable.of(x + 100));

g.subscribe(console.log);


/** 
 * Rx.Observable.prototype.flatMap 
 * and Rx.Observable.prototype.selectMany 
 * are equivalent.
 */

let h = f.map(x => x*3)
  .delay(1000)
  .flatMap(x => Observable.of(x + 100));
h.subscribe(console.log);

https://jsbin.com/vokofug/edit?js,console,output

Alternatively, you can use concat or merge:

The concat() stream will display values from source1 first, then from source2 after source1 completes.

The merge() stream will display values from source1 and source2 as they are emitted, not waiting for the first stream to complete before emitting values from the second.

http://codepen.io/SitePoint/pen/PzKdVQ

'use strict';

const source1 =
  Rx.Observable.interval(100)
    .map(val => `Source 1: ${val}`)
    .take(5);

const source2 =
  Rx.Observable.interval(100)
    .map(val => `Source 2: ${val * 10}`)
    .take(5);

const concat_table = $('#concat-table-body'),
      merge_table  = $('#merge-table-body');

source1
  .concat(source2)
  .subscribe(value => {
    const row = document.createElement('tr');
    row.innerHTML = value;

    // Source 1 values populate BEFORE Source 2 
    concat_table.append(row);
  });

source1
  .merge(source2)
  .subscribe(value => {
    const row = document.createElement('tr');
    row.innerHTML = value;

    // Source 1 values INTERLEAVE with Source 2
    merge_table.append(row);
  });

Angular 2: Patience is a Virtue When Dealing with Observables

Answer №1

Similar questions

Running into issues with TypeScript in conjunction with Redux-Form and React-Redux connect

Generate a random string and return it as a value

Exploring the World of Angular6 with the Incredible Power of tinyMCE Editor

Enhance your text in TextInput by incorporating newline characters with advanced editing features

Transferring information from childA component through its parent component and into childB component

Contrast between the node modules "highcharts-angular" and "angular-highcharts" for Angular version 7

Substitute this.bindMethod for function component

Support for dark mode in Svelte with Typescript and TailwindCSS is now available

Is it feasible to update just one key within an exported type using setState in TypeScript?

Encountering an error with loading %5Bobject%20Object%5D on a webpack-generated JavaScript file hosted in an express server because of Stylus styles

What is the process for integrating an extension function into an Express response using TypeScript?

Managing sessions between Node.js and Angular with JSON Web Tokens

How to eliminate certain elements from the DOM in Angular 5

Tips for converting mat-paginator in Angular 4?

Typescript not being transpiled by Webpack

Encountering failures while running Angular tests in GitHub Actions due to reading inner text (which works fine locally)

How to set up npm to utilize the maven directory format and deploy war files

Adjusting the dimensions of the cropper for optimal image cropping

Encountered an error trying to access '0' property of an undefined object when iterating through data in angular framework

Issue arises when attempting to use the useEffect hook in React with Typescript to reset states upon the component unmounting