Ensure Rxjs waits for the completion of the previous interval request before moving forward

Question

Ensure Rxjs waits for the completion of the previous interval request before moving forward

Scenario: It is required to make an API call every 3 minutes to update the status of a specific service within the application.

Here is my existing code snippet:

interval(180000)
            .subscribe(() => this.doRequest
            .pipe(catchError(() => {
                    this.applicationFlag = false;
                    return EMPTY;
                }))
                .subscribe(result => this.applicationFlag = result));

I am currently facing an issue where the previous interval request is not completed, but the next interval request is triggered.

Is there a way to set a flag to wait for the previous request to be completed before executing the next interval request?

javascript angular typescript rxjs

Answer 1

Answer №1

When you nest one subscribe inside another subscribe, the outer chain cannot be notified of the inner chain's completion. To address this issue, you need to restructure your chain and utilize operators like concatMap, mergeMap, or switchMap. Here's an example of how you can do it:

interval(180000)
  .pipe(
    concatMap(() => this.doRequest.pipe(
      catchError(() => {
        this.applicationFlag = false;
        return EMPTY;
      }),
    ),
  )
  .subscribe();

Answer 2

When you nest one subscribe inside another subscribe, the outer chain cannot be notified of the inner chain's completion. To address this issue, you need to restructure your chain and utilize operators like concatMap, mergeMap, or switchMap. Here's an example of how you can do it:

interval(180000)
  .pipe(
    concatMap(() => this.doRequest.pipe(
      catchError(() => {
        this.applicationFlag = false;
        return EMPTY;
      }),
    ),
  )
  .subscribe();

Ensure Rxjs waits for the completion of the previous interval request before moving forward

Answer №1

Similar questions

Adding the classname "active" in ReactJS can be achieved by utilizing the `className` attribute within

Guide on linking an Angular2+ app with an external API

What is the best way to display various components based on the user's device type, whether it be web

Best Placement for Socket.io Server in WebStorm Express Template

Scrolling to the next div will automatically align it in the center of the screen for the user

Detecting repeated keys in a query for a REST connector in loopback

Unable to choose Typescript as a programming language on the VSCode platform

Encountered a mistake while trying to deploy an Angular 2 application on Heroku - received an error message indicating an expected expression but instead got

The iron-session package does not export the path ./next/dist from the package

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Generate a new perspective by incorporating two distinct arrays

What is the best way to get both the id and name of a selected item in Angular?

Reactive form within a parent object for nested counting

The Ionic search bar will only initiate a search once the keyboard is no longer in view

Reimagine server-side storage options as an alternative to remixing JavaScript local storage

Converting camera space coordinates to scene space in three.js

Acquiring the selector value from a tag

Is there a way for one function to access the validation of a nullable field performed by another function?

How to showcase MongoDB data directly on the homepage

Vue - Unable to navigate to a different route