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

Module Z encountered an unforeseen issue with the import of value X while utilizing the --aot flag

There seems to be an issue with the TypeScript error: it does not recognize the property on the options

Opt for router-link over web route when working with Laravel

Convert the Angular PrimeNG class into a TreeNode object to avoid the error of trying to access the map property of an

NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Issue with Typescript Application not navigating into the node_modules directory

Error encountered in Typescript while attempting to $set a subdocument key value in MongoDB

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

TypeScript: Defining a custom type based on values within a nested object

In a local setting, the KendoUI chips are displaying without their borders

Tips for effectively changing Observable data into an Array

Launching the Angular2 application

Interpret information in Angular 2 using Typescript

Utilize your access token to send a message through Google Business Messages

Is there a way to optimize app speed in Angular2 by importing CommonModule and RouterModule in a centralized location?

Tips for monitoring server response in Angular 2

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

Issue with Angular Material Slide Toggle Binding on Checked Status Not Functioning

What is the process of creating the /dist folder in an unreleased version of an npm package?

Is it possible to extract a single element from an array that is stored as a standard Observable?