Angular 12: Ensure completion of all data fetching operations (using forkJoin) prior to proceeding

Question

Angular 12: Ensure completion of all data fetching operations (using forkJoin) prior to proceeding

Within my ngOnInit function, I am looking for a way to ensure that all requests made by fetchLists are completed before moving forward:

  ngOnInit(): void {
    this.fetchLists();

    this.route.params.subscribe(params => {
         this.doSomethingWithFetchedLists();
      }
    });
  }

  fetchLists(): void {
    this.httpHandlerCached.getListsA()
      .subscribe(listA => this.listA = listA);
    this.httpHandlerCached.getListsB()
      .subscribe(listB => this.listB = listB);
    this.httpHandlerCached.getListsC()
      .subscribe(listC => this.listC = listC);
  }

I would like to highlight that my previous inquiry was advised to use "forkJoin": Wait for multiple promises to finish

However, even after implementing forkJoin, I am facing the same issue:

  fetchListnames() {
    return forkJoin([
      this.httpHandlerCached.getListsA(),
      this.httpHandlerCached.getListsB(),
      this.httpHandlerCached.getListsC(),
    ]).subscribe(res => {
        this.listA = res[0];
        this.listB = res[1];
        this.listC = res[2];
      });
  }

Given the suggestion to use forkJoin, how can I ensure that the forkJoin operation is complete before proceeding (i.e., before calling

this.doSomethingWithFetchedLists()

)?

angular typescript ecmascript-6

Answer 1

Answer №1

It is not advisable to nest subscriptions as recommended by another response. Instead, it is better practice to utilize rxjs pipes and subscribe just once.

In this scenario, one might assume that placing this.route.params inside the forkJoin would work, but since this.route.params never completes, forkJoin will not emit (as per its implementation). To ensure that this.route.params completes, you can use take(1) within a pipe, resulting in the following code:

forkJoin([
      this.httpHandlerCached.getListsA(),
      this.httpHandlerCached.getListsB(),
      this.httpHandlerCached.getListsC(),
      this.route.params.pipe(take(1))
    ]).subscribe(res => {
        this.listA = res[0];
        this.listB = res[1];
        this.listC = res[2];
        this.doSomethingWithFetchedLists();
      });

Another alternative is to use combineLatest instead of forkJoin, which emits whenever any observable changes (waiting for all observables to emit at least once initially).

combineLatest([
          this.httpHandlerCached.getListsA(),
          this.httpHandlerCached.getListsB(),
          this.httpHandlerCached.getListsC(),
          this.route.params
        ]).subscribe(res => {
            this.listA = res[0];
            this.listB = res[1];
            this.listC = res[2];
            this.doSomethingWithFetchedLists();
          });

If opting for the latter method, remember to manually unsubscribe (or use take(1) in a pipe) to prevent memory leaks.

Answer 2

It is not advisable to nest subscriptions as recommended by another response. Instead, it is better practice to utilize rxjs pipes and subscribe just once.

In this scenario, one might assume that placing this.route.params inside the forkJoin would work, but since this.route.params never completes, forkJoin will not emit (as per its implementation). To ensure that this.route.params completes, you can use take(1) within a pipe, resulting in the following code:

forkJoin([
      this.httpHandlerCached.getListsA(),
      this.httpHandlerCached.getListsB(),
      this.httpHandlerCached.getListsC(),
      this.route.params.pipe(take(1))
    ]).subscribe(res => {
        this.listA = res[0];
        this.listB = res[1];
        this.listC = res[2];
        this.doSomethingWithFetchedLists();
      });

Another alternative is to use combineLatest instead of forkJoin, which emits whenever any observable changes (waiting for all observables to emit at least once initially).

combineLatest([
          this.httpHandlerCached.getListsA(),
          this.httpHandlerCached.getListsB(),
          this.httpHandlerCached.getListsC(),
          this.route.params
        ]).subscribe(res => {
            this.listA = res[0];
            this.listB = res[1];
            this.listC = res[2];
            this.doSomethingWithFetchedLists();
          });

If opting for the latter method, remember to manually unsubscribe (or use take(1) in a pipe) to prevent memory leaks.

Answer 3

Answer №2

Expanding on Christian's explanation, the withLatestFrom method can be utilized to eliminate nested subscriptions.

fetchData() {
    return forkJoin([
        this.httpHandlerCached.getDataA(),
        this.httpHandlerCached.getDataB(),
        this.httpHandlerCached.getDataC(),
    ])
    .pipe(
        withLatestFrom(this.route.params.pipe(take1)),
        map(([result, parameters]) => {
            return { result, parameters }
        })
    )
    .subscribe(response => {
        let result = response.result;
        let parameters = response.parameters;
        this.dataA = result[0];
        this.dataB = result[1];
        this.dataC = result[2];
        this.processFetchedData();
    });
}

Answer 4

Expanding on Christian's explanation, the withLatestFrom method can be utilized to eliminate nested subscriptions.

fetchData() {
    return forkJoin([
        this.httpHandlerCached.getDataA(),
        this.httpHandlerCached.getDataB(),
        this.httpHandlerCached.getDataC(),
    ])
    .pipe(
        withLatestFrom(this.route.params.pipe(take1)),
        map(([result, parameters]) => {
            return { result, parameters }
        })
    )
    .subscribe(response => {
        let result = response.result;
        let parameters = response.parameters;
        this.dataA = result[0];
        this.dataB = result[1];
        this.dataC = result[2];
        this.processFetchedData();
    });
}

Angular 12: Ensure completion of all data fetching operations (using forkJoin) prior to proceeding

Answer №1

Answer №2

Similar questions

I suggest installing the ng2-search-filter package for easy search functionality

What is the correct way to declare the mongoose _id in a TypeScript interface?

Error message indicating that the function is not defined within a custom class method

Place a hook following the storage of a variable in the device's memory

Unveiling the Ultimate Method to Package Angular 2 Application using SystemJS and SystemJS-Builder

Anticipate receiving a 'Type' returned by external library functions

Creating a hyperlink dynamically within an Angular TypeScript file can be easily achieved

Exploring the options variables within CLI commander Js action

`In NestJS Nested Schema, the @Prop decorator and mongoose options are not applied as expected

Typescript - any of the types imported from a module

How to Override Global CSS in a Freshly Created Angular Component

TypeScript is throwing an error about a missing property, even though it has been defined

In order for the expansion parameter to be successfully used, it must be either of tuple type or passed to the

My goal is to create a carousel using Vue 3 with the Composition API and TypeScript

What is the process for creating a node module with TypeScript?

Angular service encountering duplicated arrays when retrieving data from Firebase using HTTP.get

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

Adding a custom class to an ng-bootstrap tooltip can be accomplished by utilizing Angular's

Dynamic Assignment of Object Values Based on Enum Keys in Typescript

Using Angular service worker to pre-fetch video files