The forkJoin method fails to execute the log lines

Question

The forkJoin method fails to execute the log lines

I've come up with a solution.

private retrieveData() {
     console.log('Start');
     const sub1 = this.http['url1'].get();
     const sub2 = this.http['url2'].get();
     const sub3 = this.http['url3'].get();
     const sub = forkJoin([sub1, sub2, sub3]).subscribe(([res1, res2, res3]) => {
         console.log('Merging data');
         this.list1 = res1 as ProjectDto[];
         this.list2 = res2 as Array<MyTest>;
         this.list3 = res3 as Array<MyTest>;
         sessionStorage.setItem('a', JSON.stringify(this.list1));
         sessionStorage.setItem('b', JSON.stringify(this.list2));
         sessionStorage.setItem('c', JSON.stringify(this.list3));
         console.log('Data saved successfully');
     });
     console.log('Process complete');
   }

After calling the method, I noticed that two log lines within the forkJoin were not being triggered. This made me uncertain about whether the data was fetched from the service. I am utilizing rxjs version 5.5.6.

UPDATE:

Upon further inspection, I realized that the logs were indeed being printed, but due to the prolonged execution time of the service. As a result, the issue now revolves around how to ensure synchronous log printing. Currently, 'Start' and 'Process complete' are displayed first.

javascript angular typescript rxjs

Answer 1

Answer №1

When working with the subscribe function, the third parameter is crucial as it accepts a callback that will be triggered once the stream is finished.

const subscription = forkJoin([source1, source2, source3]).subscribe(([result1, result2, result3]) => {
     console.log('Using forkJoin');
     this.dataList1 = result1 as ProjectDto[];
     this.dataList2 = result2 as Array<MyTest>;
     this.dataList3 = result3 as Array<MyTest>;
     sessionStorage.setItem('x', JSON.stringify(this.dataList1));
     sessionStorage.setItem('y', JSON.stringify(this.dataList2));
     sessionStorage.setItem('z', JSON.stringify(this.dataList3));
 }, null, () => console.log('Operation completed'));

Answer 2

When working with the subscribe function, the third parameter is crucial as it accepts a callback that will be triggered once the stream is finished.

const subscription = forkJoin([source1, source2, source3]).subscribe(([result1, result2, result3]) => {
     console.log('Using forkJoin');
     this.dataList1 = result1 as ProjectDto[];
     this.dataList2 = result2 as Array<MyTest>;
     this.dataList3 = result3 as Array<MyTest>;
     sessionStorage.setItem('x', JSON.stringify(this.dataList1));
     sessionStorage.setItem('y', JSON.stringify(this.dataList2));
     sessionStorage.setItem('z', JSON.stringify(this.dataList3));
 }, null, () => console.log('Operation completed'));

Answer 3

Answer №2

To ensure proper synchronization, it is recommended to place the console.log('Completed'); statement inside the subscribe function. This is because the subscribe function is asynchronous and executes at a later time.

If you prefer to maintain the same structure, you can utilize a promise-based approach in your programming logic.

import { take } from 'rxjs/operators';
....
private async fetchData(): Promise<boolean> {
     console.log('Begin');
     const sub1 = this.http['url1'].get();
     const sub2 = this.http['url2'].get();
     const sub3 = this.http['url3'].get();
     const [res1, res2, res3] = await forkJoin([sub1, sub2, sub3]).pipe(take(1)).toPromise();
     console.log('fork join');
     this.list1 = res1 as ProjectDto[];
     this.list2 = res2 as Array<MyTest>;
     this.list3 = res3 as Array<MyTest>;
     sessionStorage.setItem('a', JSON.stringify(this.list1));
     sessionStorage.setItem('b', JSON.stringify(this.list2));
     sessionStorage.setItem('c', JSON.stringify(this.list3));
     console.log('set items');
     console.log('Completed');
     return Promise.resolve(true);
   }

Answer 4

To ensure proper synchronization, it is recommended to place the console.log('Completed'); statement inside the subscribe function. This is because the subscribe function is asynchronous and executes at a later time.

If you prefer to maintain the same structure, you can utilize a promise-based approach in your programming logic.

import { take } from 'rxjs/operators';
....
private async fetchData(): Promise<boolean> {
     console.log('Begin');
     const sub1 = this.http['url1'].get();
     const sub2 = this.http['url2'].get();
     const sub3 = this.http['url3'].get();
     const [res1, res2, res3] = await forkJoin([sub1, sub2, sub3]).pipe(take(1)).toPromise();
     console.log('fork join');
     this.list1 = res1 as ProjectDto[];
     this.list2 = res2 as Array<MyTest>;
     this.list3 = res3 as Array<MyTest>;
     sessionStorage.setItem('a', JSON.stringify(this.list1));
     sessionStorage.setItem('b', JSON.stringify(this.list2));
     sessionStorage.setItem('c', JSON.stringify(this.list3));
     console.log('set items');
     console.log('Completed');
     return Promise.resolve(true);
   }

The forkJoin method fails to execute the log lines

Answer №1

Answer №2

Similar questions

Contact a relaxation service periodically to pause its operation

Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

How can I most effectively establish defaultValues for react-hook-form in this scenario?

Execute an AJAX function to monitor a JSON response at intervals of 3 seconds

How to access a particular tab in Bootstrap 5 using an external link

Displaying dynamic data with Vue.js and Chart.js

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

Objects in the array are failing to sort in the expected sequence

Angular 11 Import Guide for MAT_DATE_LOCALE

The complete rendering of angular-google-maps is only achieved after resizing the browser

Encountered an issue with undefined property when attempting to add a second value to an array of

Repeating items must be unique; duplicates are not permitted on ng-repeat

A Comprehensive Guide on Implementing String Values in Highchart Series

Node.js server allows for accessing AJAX requests seamlessly

What is the process for personalizing the appearance in cdk drag and drop mode?

Different div elements are clashing with each other when it comes to hiding and

Leveraging the Cache-Control header in react-query for optimal data caching

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

The viewport width in NextJS does not extend across the entire screen on mobile devices