How to perform error handling from multiple Observables in Angular 2 / Ionic 3?

Alexei - check Codidact

I am trying to cache some data using multiple Observables in an Ionic 3 application:

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/forkJoin'

// saves data for a single article
private saveToCache(articleId: number): Observable<any> {
    this.loadingCtrl.create({ content: "Caching data. Please wait..." });
    this.loadingCtrl.present();

    let key = articleId;
    let obs = this.articleService.getArticleFullData(key);
    obs.subscribe(data => {
        this.loadingCtrl.dismiss();
        this.cache.saveItem("" + key, data as ArticleFullData);
        this.loggingService.logInfo("Cache article: " + key);
    },
    err => {
        this.loggingService.logError("Failed to cache data: " + key);
        this.loadingCtrl.dismiss();

        var toastObj = this.toastCtrl.create({ message: "Failed to cache data: ", duration: 2000 });
        toastObj.present();
    }
    );

    return obs;
}

// handler to perform caching for a list of articles
onCacheRefresh() {
    // articles are not loaded for some reason
    if (!this.articles)
        return;

    var obsArray = [];
    for (let article of this.articles) {
        let key = "" + article.ArticleId;

        // already in cache
        this.cache.getItem(key)
            .then(data => {
                console.log("Cache item already exists: ", data);
            })
            .catch(err => {
                obsArray.push(this.saveToCache(article.ArticleId));
            });
    }

    let err: boolean = false;
    Observable.forkJoin(obsArray).toPromise()
        .catch(err => {
            if (err)
                return;
            err = true;

            this.loggingService.logError("Failed to cache data: ", JSON.stringify(err));
            var toastObj = this.toastCtrl.create({ message: "Failed to cache data: ", duration: 2000 });
            toastObj.present();
        });
}

If, for any reason, data fetch fails the catch for the forkJoin will execute for each failure. What I want is to be able to display the toast notification only once.

Question: How should I handle errors coming from multiple Observables?

qchap

You can try wit combineLatest operator. The syntax look like this:

const combinedProject = Rx.Observable
.combineLatest(
  timerOne,
  timerTwo,
  timerThree,
  (one, two, three) => {
    return `Timer One (Proj) Latest: ${one}, 
          Timer Two (Proj) Latest: ${two}, 
          Timer Three (Proj) Latest: ${three}`
  }
);

And you can add your catch that will be call one time if one of the observable throw an exception.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

RXJava error handling of multiple Observables

From Dev

Authentication in Angular 2, handling the observables

From Dev

Authentication in Angular 2, handling the observables

From Dev

How to combine multiple Observables together in Angular 2

From Dev

Error while updating records in Mongo DB from Ionic 2/ Angular 3 using Node JS

From Java

How to fix member Event from @ionic/angular error in Ionic 5

From Dev

Angular 2 http - combine multiple Observables

From Dev

Handling error in http calls in ionic 2

From Dev

Angular2: Rendering data from Observables

From Dev

What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?

From Dev

How to "chain" two seperate observables in Angular 2

From Dev

How to fetch the property data from RESTful API using Angular 2 by observables?? Soory, I am new to this

From Dev

How do I perform error handling with two files?

From Dev

angular: trouble with an asynchronous form validator that uses results from multiple observables

From Dev

How to fetch data using *ngFor directive from storage on Ionic 3 (Cordova, Ionic 3, Angular 5)

From Dev

Ionic 2 / Angular 2: How to emit click event from a hyperlink or button on a Ionic 2 Alert?

From Dev

Angular 2 - Handling multiple subscriptions on a single observable

From Dev

Handling error codes from multiple libraries in C

From Dev

Angular 2 | Subscriping to Observables

From Dev

Angular 2 Observables

From Dev

Understanding observables in angular 2

From Dev

Angular 2 Observables

From Dev

Observables in Angular2

From Dev

Angular 2/4 Observables

From Dev

Ionic 2: how to get error from created Observable?

From Dev

Error handling with Angular2 async pipe

From Dev

Angular2 : HTTP error handling

From Dev

Proper error handling for Angular 2 http result

From Dev

Angular 2 http Service Error handling

Related Related

  1. 1

    RXJava error handling of multiple Observables

  2. 2

    Authentication in Angular 2, handling the observables

  3. 3

    Authentication in Angular 2, handling the observables

  4. 4

    How to combine multiple Observables together in Angular 2

  5. 5

    Error while updating records in Mongo DB from Ionic 2/ Angular 3 using Node JS

  6. 6

    How to fix member Event from @ionic/angular error in Ionic 5

  7. 7

    Angular 2 http - combine multiple Observables

  8. 8

    Handling error in http calls in ionic 2

  9. 9

    Angular2: Rendering data from Observables

  10. 10

    What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?

  11. 11

    How to "chain" two seperate observables in Angular 2

  12. 12

    How to fetch the property data from RESTful API using Angular 2 by observables?? Soory, I am new to this

  13. 13

    How do I perform error handling with two files?

  14. 14

    angular: trouble with an asynchronous form validator that uses results from multiple observables

  15. 15

    How to fetch data using *ngFor directive from storage on Ionic 3 (Cordova, Ionic 3, Angular 5)

  16. 16

    Ionic 2 / Angular 2: How to emit click event from a hyperlink or button on a Ionic 2 Alert?

  17. 17

    Angular 2 - Handling multiple subscriptions on a single observable

  18. 18

    Handling error codes from multiple libraries in C

  19. 19

    Angular 2 | Subscriping to Observables

  20. 20

    Angular 2 Observables

  21. 21

    Understanding observables in angular 2

  22. 22

    Angular 2 Observables

  23. 23

    Observables in Angular2

  24. 24

    Angular 2/4 Observables

  25. 25

    Ionic 2: how to get error from created Observable?

  26. 26

    Error handling with Angular2 async pipe

  27. 27

    Angular2 : HTTP error handling

  28. 28

    Proper error handling for Angular 2 http result

  29. 29

    Angular 2 http Service Error handling

HotTag

Archive