Tips for avoiding recursive error function calls in Angular 5

Question

Tips for avoiding recursive error function calls in Angular 5

Is there a way to avoid repetitive function calls within a recursive function?

Take a look at the following code snippet:

loadFinalData(id, color){
    this.data = this._test.getUrl(id, "white");
    this.dataHover = this._test.getUrl(id, "blue");
}

private flux: Subscription;

loadData(id, color) {

    if(this.flux) this.flux.unsubscribe();

    this.flux = this._test.getData(id, "white")
    .subscribe( 
        res => this.loadFinalData(id, "white"),
        err => setTimeout( _ => this.loadData(id, "white"), 5000 )
    )
};

In this scenario, we are recursively calling the loadData function.

The issue arises from the fact that the error function in the subscribe() block triggers every 5 seconds and does not stop (even when using unsubscribe()).

typescript angular5

Answer 1

Answer №1

If you're looking for a solution that retries 3 times before stopping, the following code snippet could be useful:

public loadData(id, color) {
    this._test.getData(id, 'white')
        .retryWhen(retryObs$ => retryObs$
            .zip(Rx.Observable.range(1, 3), (_, i) => i)
            .delay(5000))
        .subscribe((res) => this.loadFinalData(id, 'white'));
}

To experiment with similar functionality, consider using this example:

(function () {
    const attempts = 5;
    var obs = Rx.Observable.interval(10)
        .do((val) => { if (val > 2) throw val; })
        .do((val) => console.log(`Have value: ${val}`))
        .retryWhen(retryObs$ => retryObs$
            .zip(Rx.Observable.range(1, attempts), (_, i) => i)
            .do((attempt) => console.log(`Failed attempt #${attempt}`))
            .do((attempt) => {if (attempt === attempts) throw 'Thrown error'})
            .delay(100))
        .catch((err, obs$) => (console.log(`Received error: ${err}`), Rx.Observable.throw('Rethrown error')));
    var sub = obs.subscribe();
    setTimeout(() => sub.unsubscribe(), 5000);
})()

For in-depth information on RX concepts, refer to the RX book available at:

Answer 2

If you're looking for a solution that retries 3 times before stopping, the following code snippet could be useful:

public loadData(id, color) {
    this._test.getData(id, 'white')
        .retryWhen(retryObs$ => retryObs$
            .zip(Rx.Observable.range(1, 3), (_, i) => i)
            .delay(5000))
        .subscribe((res) => this.loadFinalData(id, 'white'));
}

To experiment with similar functionality, consider using this example:

(function () {
    const attempts = 5;
    var obs = Rx.Observable.interval(10)
        .do((val) => { if (val > 2) throw val; })
        .do((val) => console.log(`Have value: ${val}`))
        .retryWhen(retryObs$ => retryObs$
            .zip(Rx.Observable.range(1, attempts), (_, i) => i)
            .do((attempt) => console.log(`Failed attempt #${attempt}`))
            .do((attempt) => {if (attempt === attempts) throw 'Thrown error'})
            .delay(100))
        .catch((err, obs$) => (console.log(`Received error: ${err}`), Rx.Observable.throw('Rethrown error')));
    var sub = obs.subscribe();
    setTimeout(() => sub.unsubscribe(), 5000);
})()

For in-depth information on RX concepts, refer to the RX book available at:

Tips for avoiding recursive error function calls in Angular 5

Answer №1

Similar questions

Issue with Value Update in Angular 7 Reactive Forms

Typescript encounters difficulty locating the Express module

Troubleshooting Generic Problems in Fastify with TypeScript

Can a file be transferred from the private path to the document directory?

Having trouble getting the ValidatorPipe to function properly in my nest.js application

The component "react-dnd-html5-backend" does not have a defined export called 'HTML5Backend'

What is the process for interpreting the status code retrieved from an HTTP Post request?

The error message "TypeScript is showing 'yield not assignable' error when using Apollo GraphQL with node-fetch

React is unable to identify the property that was passed to a styled-component in Material UI

Issue: Generated JavaScript files not visible in Visual Studio when using TypeScript.Explanation: When working with

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

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

Getter and Setter Implementation in Typescript without Using Classes

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

What is the best way to implement useAsync (from the react-async-hook library) using TypeScript?

Typescript's definition file includes imports that can result in errors

The error encountered during parsing the module for Next.js, Webpack, and TypeScript files (.ts, .tsx) was due to an unexpected token

Iterate through the complex array of nested objects and modify the values according to specified conditions

What is the proper way to implement ref in typescript?

A guide on successfully sending parameters to Angular routes