Invoke the subscribe function within the encompassing parent function

Question

Invoke the subscribe function within the encompassing parent function

In crafting a versatile method, I have devised the following code snippet:

fetchArticle(loading: Loading): void {
    this.articleService.getArticleById(this.data.definition.id)
      .map((response: any) => response.json())
      .subscribe((response: any) => {
        if (response.definition.is_purchased) {
          //additional instructions
          } else {
            //more instructions
          }
          loading.dismiss();
        } else {
           loading.dismiss();
        }
      }, () => { 
          loading.dismiss(); 
      });
  }

The method invoking this function looks like the following:

 myCallerFunction() {
     const loading = this.loader.create({
      content: 'loading...'
    });
    loading.present();

    this.fetchArticle(loading); //Can I place `loading.dismiss()` here? 
    }

To streamline the process, I am seeking advice on how to eliminate the loading parameter from the generic fetchArticle() method and move it within the parent function (myCallerFunction()) after resolving the subscription. Can you suggest a way to achieve this?

javascript angular typescript rxjs observable

Answer 1

Answer №1

When dealing with an observable that terminates at a higher level, you must ensure to return an observable that can be accessed by the higher-level function.

One way to write this is:

getArticleById(loading: Loading) {
    const articles$ = this.articleService.getArticleById(this.data.definition.id)
      .map((res: any) => res.json());

    article$.subscribe((res: any) => {
        if (res.definition.is_purchased) {
          //more code
          } else {
            //more code
          }
    });

    return article$;  
}

The finally operator comes in handy as it:

Invokes a specified action after the source observable sequence terminates gracefully or exceptionally.

myParentMethod(){
    const loading = this.loader.create({
      content: 'loading...'
    });
    loading.present();

    this.getArticleById().finally(() => loading.dismiss());
}

However, to improve the structure of the code, consider separating the logic for obtaining the observable from handling it. The revised code would look something like this:

getArticleById(): Observable<Article> {
    return this.articleService.getArticleById(this.data.definition.id)
      .map(res => res.json());
}

handleArticle(article) {
    if (article.definition.is_purchased) {
      //more code
    } else {
        //more code
    }
}

myParentMethod(){
    const loading = this.loader.create({
      content: 'loading...'
    });
    const article$ = this.getArticleById();

    loading.present();

    article$
      .finally(() => loading.dismiss())
      .subscribe(article => this.handleArticle(article));
}

Answer 2

When dealing with an observable that terminates at a higher level, you must ensure to return an observable that can be accessed by the higher-level function.

One way to write this is:

getArticleById(loading: Loading) {
    const articles$ = this.articleService.getArticleById(this.data.definition.id)
      .map((res: any) => res.json());

    article$.subscribe((res: any) => {
        if (res.definition.is_purchased) {
          //more code
          } else {
            //more code
          }
    });

    return article$;  
}

The finally operator comes in handy as it:

Invokes a specified action after the source observable sequence terminates gracefully or exceptionally.

myParentMethod(){
    const loading = this.loader.create({
      content: 'loading...'
    });
    loading.present();

    this.getArticleById().finally(() => loading.dismiss());
}

However, to improve the structure of the code, consider separating the logic for obtaining the observable from handling it. The revised code would look something like this:

getArticleById(): Observable<Article> {
    return this.articleService.getArticleById(this.data.definition.id)
      .map(res => res.json());
}

handleArticle(article) {
    if (article.definition.is_purchased) {
      //more code
    } else {
        //more code
    }
}

myParentMethod(){
    const loading = this.loader.create({
      content: 'loading...'
    });
    const article$ = this.getArticleById();

    loading.present();

    article$
      .finally(() => loading.dismiss())
      .subscribe(article => this.handleArticle(article));
}

Invoke the subscribe function within the encompassing parent function

Answer №1

Similar questions

Speed of scrolling on a biquadratic Bezier curve

How does Typescript's dynamic tuple typing tool display all available options in Autocompletion/Intellisense?

How can I iterate through the lines of a JSON file using javascript?

The Vue.js application is experiencing issues with displaying Google Maps functionalities

Checking for valid zip code using a regular expression in JavaScript

Creating a Dynamic Tree View Component in AngularJS Using JSON Data

When using Angular's .navigateByUrl() method, it successfully navigates to the desired page, however the html content is not

Utilizing the @keypress event handler in VueJS

Utilizing Typescript for parsing large JSON files

Revamping MapReduce in MongoDB Version 2.4

Generating dynamic @returns annotations in JSDoc based on the value of @param

The app.get() function seems to be inactive and not triggering in the Express application

AngularJs FileList Drag and Drop Feature

Issue with integrating e-junkie shopping cart with Bootstrap 5

When using Laravel 5.2, JSON data is mistakenly returned as HTML

The error message "TypeError XXX is not a function in NodeJS" indicates that

Can you explain the rule known as the "next-line" in TypeScript?

Utilize the ESLint plugin to manage unresolved import paths in Next.js modules

Can TypeScript ascertain the object's type dynamically based on the key of its proxy name?

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch