Try querying again if you receive no results from an http.get request in Angular using RXJS Operators

Question

Try querying again if you receive no results from an http.get request in Angular using RXJS Operators

In my Angular service, I sometimes encounter an issue where I receive an empty array. In such cases, I would like to trigger a fresh query.

let request = this.http.post(this.searchlUrl, payload).pipe(
          retryWhen(errors => errors.pipe(delay(1000), take(2), concat(throwError("Error Data")))), 
          map( res => {
            // If the response contains an empty 'hotels' array, I want to force an error
            return res; 
          })
        ).subscribe(res => {
            // Perform actions when everything is ok
        }, err => {
            // Handle errors here
        });

I am utilizing retryWhen to initiate a new request in case of errors (with a 1-second delay). My current approach involves triggering an error upon receiving an empty result to activate the retry mechanism. However, I need guidance on how to achieve this and determine the best practice for forcing a re-query when encountering an empty response.

angular typescript http rxjs

Answer 1

Answer №1

The issue at hand is the sequencing of operators. The retryWhen method only responds to error notifications, so you must throw the error before calling retryWhen:

this.http.post(this.searchlUrl, payload).pipe(
  map(response => {
    if (something) {
      throw new Error(); // This will be caught by `map` and emitted as an error notification.
    }
    return response;
  }),
  retryWhen(errors => errors.pipe(take(2), delay(1000))),
).subscribe(...);

Check out the live demonstration here: https://stackblitz.com/edit/rxjs-cmh1wd

Answer 2

The issue at hand is the sequencing of operators. The retryWhen method only responds to error notifications, so you must throw the error before calling retryWhen:

this.http.post(this.searchlUrl, payload).pipe(
  map(response => {
    if (something) {
      throw new Error(); // This will be caught by `map` and emitted as an error notification.
    }
    return response;
  }),
  retryWhen(errors => errors.pipe(take(2), delay(1000))),
).subscribe(...);

Check out the live demonstration here: https://stackblitz.com/edit/rxjs-cmh1wd

Answer 3

Answer №2

Check out this simple illustration of a retry scenario that could provide some guidance. The example uses the of method to generate the observable stream. You can modify it to fit your specific API call.

private responseToDisplay: string[] = [];

  ngOnInit() {
    var request = 
      of(this.responseToDisplay).pipe(
        map(response => {
          if (response.length === 0) {
            this.responseToDisplay.push("new value");
            console.log("No data received!")
            throw new Error();
          }
          return response;
        }),
        retryWhen(errors => {
          console.log("Retrying the operation!")
          return of(this.responseToDisplay)})
      );

      request.subscribe(data => console.log(data[0]));
  }

Answer 4

Check out this simple illustration of a retry scenario that could provide some guidance. The example uses the of method to generate the observable stream. You can modify it to fit your specific API call.

private responseToDisplay: string[] = [];

  ngOnInit() {
    var request = 
      of(this.responseToDisplay).pipe(
        map(response => {
          if (response.length === 0) {
            this.responseToDisplay.push("new value");
            console.log("No data received!")
            throw new Error();
          }
          return response;
        }),
        retryWhen(errors => {
          console.log("Retrying the operation!")
          return of(this.responseToDisplay)})
      );

      request.subscribe(data => console.log(data[0]));
  }

Try querying again if you receive no results from an http.get request in Angular using RXJS Operators

Answer №1

Answer №2

Similar questions

Employ the use of expressions to retrieve and store input values within a template

Angular 11 issue: Unable to display image on the webpage

Error: The function jquery_1.default is not recognized by webpack

Using @ViewChildren in Angular 2 for creating recursive components

I continuously encounter an issue in Vite version 3.2.4 where an error pops up stating `[vite:esbuild] The service has stopped running: write EPIPE`

What's the process for deducing the default generic parameter from a function type?

Creating an Angular table using reactive forms: a step-by-step guide

Is there a way to access every item that includes a particular attribute and attribute term within the woocommerce-rest-api?

Dealing with Cross-Origin Resource Sharing Problems in Angular 8 REST API

Reduce the size of log messages in cypress

Fixing the issue of the Put method not successfully updating MongoDB when using Angular7 with NodeJS on the

Having trouble with GoogleSignIn in React Native Firebase app

Unable to locate the API compiler-cli and the VERSION function

Why did my compilation process fail to include the style files despite compiling all other files successfully?

Determining the sequence of events for @HostListener event within an Angular directive

Running tests on functions that are asynchronous is ineffective

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

Consolidating Typescript modules into a single .js file

Retrieving User's Theme Preference from Local Storage in Next.js Instantly

Implementing conditional properties in Typescript based on the value of another property