Unsubscribing from a nested observable - a step-by-step

Question

Unsubscribing from a nested observable - a step-by-step

In our Angular component, we leverage the ngOnDestroy() method to handle canceling http requests that are still pending when navigating away from a page. To avoid reloading data that has already been fetched, we utilize a custom generic cache helper on certain pages.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AsyncSubject } from "rxjs";

@Injectable()
export class HttpCacheHelper {
    public cache = new Map<string, AsyncSubject<any>>();

    public constructor(private readonly http: HttpClient) {        

    }

    public get<T>(url: string): AsyncSubject<T> {
        if (!this.cache.has(url)) {
            const subject = new AsyncSubject<T>();
            this.cache.set(url, subject);
            this.http.get(url)
                .subscribe((data:any) => {
                    subject.next(data as T);
                    subject.complete();
                });
        }
        return this.cache.get(url);
    }
}

I'm facing an issue where unsubscribing from the AsyncSubject doesn't actually cancel my http call. How can I achieve proper cancellation in this scenario?

angular typescript rxjs observable

Answer 1

Answer №1

If you find yourself in this situation, there is no need to manually unsubscribe from the HTTP source (refer to this thread). In most cases, utilizing operators like take or flatMap can handle nested subscriptions efficiently.

Answer 2

If you find yourself in this situation, there is no need to manually unsubscribe from the HTTP source (refer to this thread). In most cases, utilizing operators like take or flatMap can handle nested subscriptions efficiently.

Answer 3

Answer №2

Retrieve the subscription Object and cancel it.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AsyncSubject, Subscription } from "rxjs";

@Injectable()
export class HttpCacheHelper {
    public cache = new Map<string, AsyncSubject<any>>();
    private mySubscription: Subscription;
    public constructor(private readonly http: HttpClient) {        

    }

    public fetch<T>(url: string): AsyncSubject<T> {
        if (!this.cache.has(url)) {
            const subject = new AsyncSubject<T>();
            this.cache.set(url, subject);
            this.mySubscription = this.http.get(url)
                .subscribe((data:any) => {
                    subject.next(data as T);
                    subject.complete();
                });
        }
        return this.cache.get(url);
    }

// Call this function when no longer needed
ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
}

}

Answer 4

Retrieve the subscription Object and cancel it.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AsyncSubject, Subscription } from "rxjs";

@Injectable()
export class HttpCacheHelper {
    public cache = new Map<string, AsyncSubject<any>>();
    private mySubscription: Subscription;
    public constructor(private readonly http: HttpClient) {        

    }

    public fetch<T>(url: string): AsyncSubject<T> {
        if (!this.cache.has(url)) {
            const subject = new AsyncSubject<T>();
            this.cache.set(url, subject);
            this.mySubscription = this.http.get(url)
                .subscribe((data:any) => {
                    subject.next(data as T);
                    subject.complete();
                });
        }
        return this.cache.get(url);
    }

// Call this function when no longer needed
ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
}

}

Answer 5

Answer №3

To stop receiving updates from the source, you will need to unsubscribe:

function fetchData<T>(url: string): Subject<T> {
    if (!this.cache.has(url)) {
        const subject = new Subject<T>();

        const subscription = this.http.get(url)
            .subscribe((data:any) => {
                subject.next(data as T);
                subject.complete();
            });

         this.cache.set(url, {
           subscribe(observer) { subject.subscribe(observer) },
           unsubscribe(observer) { subscription.unsubscribe() }
         });
    }

    return this.cache.get(url);
}

Answer 6

To stop receiving updates from the source, you will need to unsubscribe:

function fetchData<T>(url: string): Subject<T> {
    if (!this.cache.has(url)) {
        const subject = new Subject<T>();

        const subscription = this.http.get(url)
            .subscribe((data:any) => {
                subject.next(data as T);
                subject.complete();
            });

         this.cache.set(url, {
           subscribe(observer) { subject.subscribe(observer) },
           unsubscribe(observer) { subscription.unsubscribe() }
         });
    }

    return this.cache.get(url);
}

Answer 7

Answer №4

If you're looking to stop receiving emails, here's another way you can try

Start by deciding on a subject line for the unsubscribe request

private endSubscriptions$ = new Subject();

Insert this line of code before any .subscribe() that you want to cancel later

.pipe(takeUntil(this.endSubscriptions$))

For instance

this.anyService.getData()
  .pipe(takeUntil(this.endSubscriptions$))
  .subscribe((data: any) => {
    // Carry out necessary tasks...
  });

In your component, include ngOnDestroy() as follows

ngOnDestroy() {
  this.endSubscriptions$.next();
  this.endSubscriptions$.complete(); // Ensure complete unsubscription
}

As soon as ngOnDestroy() is called, all subscriptions utilizing takeUntil will be automatically unsubscribed

Answer 8

If you're looking to stop receiving emails, here's another way you can try

Start by deciding on a subject line for the unsubscribe request

private endSubscriptions$ = new Subject();

Insert this line of code before any .subscribe() that you want to cancel later

.pipe(takeUntil(this.endSubscriptions$))

For instance

this.anyService.getData()
  .pipe(takeUntil(this.endSubscriptions$))
  .subscribe((data: any) => {
    // Carry out necessary tasks...
  });

In your component, include ngOnDestroy() as follows

ngOnDestroy() {
  this.endSubscriptions$.next();
  this.endSubscriptions$.complete(); // Ensure complete unsubscription
}

As soon as ngOnDestroy() is called, all subscriptions utilizing takeUntil will be automatically unsubscribed

Answer 9

Answer №5

If I were to recommend an approach, I would suggest utilizing the combination of publishReplay and refCount:

@Injectable()
export class HttpCacheHelper {
  public cache = new Map<string, Observable<yourType>>();

  public constructor(private readonly http: HttpClient) {}

  public get<T>(url: string): Observable<T> {
    if (!this.cache.has(url)) {
      const obs = this.http.get(url).pipe(
         publishReplay(1),
         refCount()
      )

      this.cache.set(url, obs); 
    }

    return this.cache.get(url);
  }

  // Utilize the below function when necessary
  ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
  }
}

Answer 10

If I were to recommend an approach, I would suggest utilizing the combination of publishReplay and refCount:

@Injectable()
export class HttpCacheHelper {
  public cache = new Map<string, Observable<yourType>>();

  public constructor(private readonly http: HttpClient) {}

  public get<T>(url: string): Observable<T> {
    if (!this.cache.has(url)) {
      const obs = this.http.get(url).pipe(
         publishReplay(1),
         refCount()
      )

      this.cache.set(url, obs); 
    }

    return this.cache.get(url);
  }

  // Utilize the below function when necessary
  ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
  }
}

Unsubscribing from a nested observable - a step-by-step

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Angular: Card disabled post-click

Tips for streamlining the use of http.get() with or without parameters

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

Error TS2309: TypeScript encountered an error in Types/node/index.d.ts

Step-by-step guide to linking a matTooltip with a disabled mat-tab

React, redux, and redux observable are all essential tools for developing web applications. They

The styles and scripts in Angular.json are not functioning properly

A foundational NodeJS program in TypeScript featuring a structured client-utility-definition setup with adherence to stringent coding guidelines

Transform the request in an Angular2 and jQuery Ajax POST call

Tips for incorporating ngIf within a td element

Developing a TypeScript library through modular class implementation

Exploring the hidden gems of npm package.json: the keys

In React, the edit mode fails to display class attributes

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

The Angular data table is encountering an issue as the dataStream.pipe function is not recognized

Aurelia CLI encounters difficulty importing chart.js when using TypeScript

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Error: Trying to access property '2' of a null value

Using TypeScript and controllerAs with $rootScope

Stop focusing on mat-select after a selection is made