Performing both HTTP requests with a single subscribe function in Angular 4

Question

Performing both HTTP requests with a single subscribe function in Angular 4

I'm facing an issue with the following code:

ComputerValue: number;
private subscription: ISubscription;

ngOnInit() {
  this.getMyValue();
  setInterval(() => {
    this.getMyValue();
  }, 30000);
}


getMyValue(): void {
  this.subscription = this.dataService.getValueOfComputer().subscribe(data => {
    console.log(data);
    this.ComputerValue = data;
  });
}

After checking my console, I noticed that the result is being displayed twice because it seems like my HTTP query inside the subscribe function is executing twice. This has been puzzling me.

https://i.sstatic.net/NFGca.png

Any suggestions on how to resolve this?

Thank you in advance!

angular typescript http subscribe

Answer 1

Answer №1

Using setTimeout instead of setInterval may be more appropriate in this case. The getMyValue method will still get called every 30 seconds.

It seems that the getMyValue method is being called twice. Once inside the ngOnInit and then again within the setInterval of ngOnInit.

To streamline your code, you can make the following changes:

ComputerValue: number;
private subscription: ISubscription;

ngOnInit() {
  setInterval(() => {
    this.getMyValue();
  }, 30000);
}


getMyValue(): void {
  this.subscription = this.dataService.getValueOfComputer().subscribe(data => {
    console.log(data);
    this.ComputerValue = data;
  });
}

If you're experiencing multiple console logs, it might be due to memory leaks. Consider unsubscribing from the subscription by implementing the following:

FIX

Before making any further modifications, be sure to add the unsubscribe method to properly manage subscriptions. This can help prevent multiple logs appearing in the console.

ngOnDestroy() {
  this.subscription && this.subscription.unsubscribe();
}

Note: To replicate the issue, try commenting out the ngOnDestroy method and observe the behavior when changing console log contents without periodic intervals.

Answer 2

Using setTimeout instead of setInterval may be more appropriate in this case. The getMyValue method will still get called every 30 seconds.

It seems that the getMyValue method is being called twice. Once inside the ngOnInit and then again within the setInterval of ngOnInit.

To streamline your code, you can make the following changes:

ComputerValue: number;
private subscription: ISubscription;

ngOnInit() {
  setInterval(() => {
    this.getMyValue();
  }, 30000);
}


getMyValue(): void {
  this.subscription = this.dataService.getValueOfComputer().subscribe(data => {
    console.log(data);
    this.ComputerValue = data;
  });
}

If you're experiencing multiple console logs, it might be due to memory leaks. Consider unsubscribing from the subscription by implementing the following:

FIX

Before making any further modifications, be sure to add the unsubscribe method to properly manage subscriptions. This can help prevent multiple logs appearing in the console.

ngOnDestroy() {
  this.subscription && this.subscription.unsubscribe();
}

Note: To replicate the issue, try commenting out the ngOnDestroy method and observe the behavior when changing console log contents without periodic intervals.

Answer 3

Answer №2

RESOLVED

In my project, I had two components - AppComponent and ExampleComponent. The issue described above was related to ExampleComponent.

To resolve the problem, I made sure to include ExampleComponent in the NgModule by adding it to both the declarations and Bootstrap array as shown below:

@NgModule({
    imports: [BrowserModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ChartsModule],
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent, ExampleComponent],
    providers:[DataService]
})

The key solution was removing ExampleComponent from the Bootstrap Array, which successfully stopped the duplication of HTTP requests.

If anyone has additional insights on this matter, please feel free to share your thoughts.

Answer 4

RESOLVED

In my project, I had two components - AppComponent and ExampleComponent. The issue described above was related to ExampleComponent.

To resolve the problem, I made sure to include ExampleComponent in the NgModule by adding it to both the declarations and Bootstrap array as shown below:

@NgModule({
    imports: [BrowserModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ChartsModule],
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent, ExampleComponent],
    providers:[DataService]
})

The key solution was removing ExampleComponent from the Bootstrap Array, which successfully stopped the duplication of HTTP requests.

If anyone has additional insights on this matter, please feel free to share your thoughts.

Performing both HTTP requests with a single subscribe function in Angular 4

Answer №1

FIX

Answer №2

Similar questions

Transform coordinated universal time to the corresponding local time using Angular

Showing nested information from an observable within an Angular 2 template

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

What should be the output when ending the process using process.exit(1)?

Utilizing MySQL Data in an Angular 2 Front-End Component within an Electron Desktop Application

How can I transfer a JSON array to a custom element in Angular?

Having trouble with an Angular HTTP PUT request returning a 404 error for a valid URL on a JSON server!

Tips on preventing the initial undefined subscription in JavaScript when using RxJS

The properties naturalWidth and naturalHeight are both returning a value of zero

Tips for converting a JSON object to TypeScript compliant format:

Looping through GET requests

Issue with installation of Npm package dependencies

Error TS2339: Cannot access attribute 'reactive_support' on interface 'LocalizedStringsMethods'

Ways to retrieve a Class Level Variable within the onCellValueChanged function in agGrid

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

Error in Typescript: Cannot assign type 'string[]' to type 'string'

Using the function goToPage() within the TabbedHeaderPager component

In the latest version of Expo SDK 37, the update to [email protected] has caused a malfunction in the onShouldStartLoadWithRequest feature when handling unknown deeplinks

Guidelines for releasing Node.js microservice client as a stand-alone package within the repository

Next.js page freezes when Axios request is made causing the tab to become unresponsive