Attempt to re-establish connection to server callback in Angular 2 upon encountering failure

Question

Attempt to re-establish connection to server callback in Angular 2 upon encountering failure

tag, I have created an API parent class where all the necessary methods are implemented for server communication. The ApiService class is injected with Http and MdSnackBar services to handle HTTP requests and display snack bar messages. The get() method in the ApiService class performs a GET request to the server, showing a progress bar while fetching data. It constructs the endpoint URL based on the provided resourceUrl and queryOptions. In case of an error, the catchError() function is called to display an error message on the snack bar. The user can click on the "Retry" button to invoke the callback function and attempt to reconnect to the server. Despite console logging within the callback function confirming its execution, retrying the connection does not seem to work as expected. The issue lies in how the callback() function is being utilized within the catchError() function. Further debugging is required to resolve this behavior.

angular api typescript callback

Answer 1

Answer №1

Here's a function that you can use:

  fetchResource<T>(resourceUrl: string, options?: { [key: string]: any; }, subject: Subject<T> = null): Observable<T> {
    this.loadingService.show();

    const endpoint = resourceUrl + this.constructQueryString(options);

    subject = subject || new Subject<T>();

    const retryCallback = () =>  { return this.fetchResource<T>(resourceUrl, options, subject); };

    let obs = this.http.get(endpoint)
      .map(this.processData)
      .catch((err: Response, caught: Observable<T>) => {
        return this.handleError(err, this.notificationService, retryCallback);
      });

    obs.subscribe(res => {
      this.loadingService.hide();
      subject.next(res);
      subject.complete();
    });

    return subject;
  }

If the user decides not to retry the request, consider calling subject.error() to clean up the subject and inform listeners that no response will be received.

Answer 2

Here's a function that you can use:

  fetchResource<T>(resourceUrl: string, options?: { [key: string]: any; }, subject: Subject<T> = null): Observable<T> {
    this.loadingService.show();

    const endpoint = resourceUrl + this.constructQueryString(options);

    subject = subject || new Subject<T>();

    const retryCallback = () =>  { return this.fetchResource<T>(resourceUrl, options, subject); };

    let obs = this.http.get(endpoint)
      .map(this.processData)
      .catch((err: Response, caught: Observable<T>) => {
        return this.handleError(err, this.notificationService, retryCallback);
      });

    obs.subscribe(res => {
      this.loadingService.hide();
      subject.next(res);
      subject.complete();
    });

    return subject;
  }

If the user decides not to retry the request, consider calling subject.error() to clean up the subject and inform listeners that no response will be received.

Attempt to re-establish connection to server callback in Angular 2 upon encountering failure

Answer №1

Similar questions

Integration with the Mastercard MIGS API platform

A generic type in TypeScript that allows for partial types to be specified

Demonstrate JSON data using ngFor loop in Angular

Challenges with sorting and pagination in Angular 6's material-table

Bringing Typescript classes into React-scripts does not act as a constructor

Unexpected Typescript error when React component receives props

What is the best way to remove linear-gradient effects applied by a dark mode theme?

Troubleshooting: Issues with Angular2 compatibility on Safari version 9.1.2

Bringing in the node-spotify or spotify-web modules to the browser for seamless integration

Is there a way to retrieve the id attribute of an option element from the source component?

Tips for incorporating a fresh variant into the default typography of MUI using TypeScript

Broaden the natural interface for the element

Failure to Trigger Callback in Android's Asynchronous API for AJAX Queries

Testing the derived class resulted in failure with the error message: "Unable to resolve all parameters for : (?, ?) in Angular 5."

Tips for obtaining the passed Tag name when executing the Cypress Framework

Issue with NgModule in Angular application build

Updating Angular 13 with charts.js and ng2-charts may expose unfixed vulnerabilities

Improving efficiency of API requests to a single endpoint utilizing varied payloads

The issue arises when Jest ceases to function properly once the "type": "module" is configured in the tsconfig.json file

The elixir-typescript compilation process encountered an error and was unable to complete