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

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

Is the Kendo Spreadsheet supported in Angular 2?

Steps for deactivating a button based on the list's size

Developing interactive checkboxes for individual rows through React.js

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages

Tips for keeping the main section from scrolling while scrolling through the side navigation

Using Typescript and React to assign an array object to state

Implementing the MVC pattern in the app.js file for a Node.js and Express web application

When utilizing the React onclick function, it generates an increase in state values rather than modifying

In Javascript, the color can be changed by clicking on an object, and the color

JavaScript: A guide to finding CSS properties within a string

Typescript: Subscribed information mysteriously disappeared

Exploring Next.js' dynamic routes with an alternative URL approach

How to Easily Add GitHub NPM Packages to Your SAPUI5 Web IDE

Exploring the power of Vue.js with dynamic HTML elements and utilizing Vue directives within Sweet Alert

What is the appropriate way to notify Gulp when a task has been completed?

The authentication status returned by PassportJS's req.isAuthenticated function consistently indicates as false

Exploring Vue Component Features through Conditional Display

Promise rejection not handled: The play() function was unsuccessful as it requires the user to interact with the document beforehand

Modify path and refresh display upon ajax call to node server