What is the best way to invoke an Observable containing a timer within another Observable using typescript?

My Angular application includes a http POST call that takes approximately 15-20 seconds to complete. On the backend, I calculate a value for a progress bar related to this post call on the frontend.

Now, I am looking to execute http GET calls every 250ms once the POST call is initiated until it is finished.

I have explored the operators in Rxjs, but I am struggling to figure out how to properly combine/pipe them (e.g., timer or interval).

Below is my current code snippet:

// This Observable performs the POST call upon subscription
const x = this.apiService.importBackUp(this.backupList);

x.subscribe(); // Here, I aim to subscribe to my GET call every 250ms until completion

apiService.ts:

importBackUp(backup: BackupList[]): Observable<any> {
    return this.httpClient.post(this.API_URL + '/Settings/import', backup)
      .pipe(
        catchError(this.handleError('Import Backup', null))
      );
}

getProgress(): Observable<number> {
    return this.httpClient.get<number>(this.API_URL + '/Settings/progress')
      .pipe(
        catchError(this.handleError('Get Import Progress', null))
      );
}

Answer №1

give this a shot

interval(250).pipe(
        mergeMap(()=>this.apiService.getProgress()),
        tap(progress=>make sure you process the update ....),
        takeUntil(this.apiService.importBackUp(this.backupList))
        ).subscribe()

alternatively

this.apiService.importBackUp(this.backupList).pipe(
withLatestFrom(
    interval(250).pipe(
    switchMap(()=>this.apiService.getProgress()),
    tap(progress=>ensure you process the update ....),
    )
)
.subscribe()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with material table not showing data

Problem I've been working on integrating a material design table into my project, but I'm running into an issue where the data isn't showing up. I followed the example provided here but all I see is a single vertical line on the page: https ...

Incorrectly calling Asset URL in a single spa micro front-end

Currently, I am utilizing the single-spa library to implement micro front-end functionality. My challenge lies in using assets within my pages as the generated URLs for fetching these assets are incorrect. For example, when attempting to use an informati ...

The issue of not being able to bind to 'formGroup' because it is not a recognized property of 'form' persisted despite trying solutions from other sources

I have followed the instructions in the guide but I am encountering issues. An error message stating the following is being displayed: Can't bind to 'formGroup' since it isn't a known property of 'form'. Another error occ ...

Dealing with side effects in react/redux: Best practices and tips

Trying to find the best way to integrate an async side-effects handler into my react/redux setup has been quite a challenge. In my react-router-driven application, all the main containers at root level are smoothly dispatching actions and receiving update ...

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

I am interested in using the v-simple-table UI component from Vuetify.js to create a table similar to the one shown below. https://i.sstatic.net/QNdpJ.png After creating the code in codesandbox and previewing the output, I noticed that the title is not a ...

What is the procedure for inputting the settings for the export module in webpack?

I am currently working on setting up this webpack configuration file. However, I encountered an issue where the error message states that "any" is being used as a value instead of a type. How can I resolve this issue? module.exports:any = { ...

How to optimize and reduce bundle size in Webpack using tree-shaking, babel-loader, TypeScript tsconfig target configuration, @babel/preset-env with modules set to false, and setting side

Looking to implement the tree-shaking feature of Webpack for es6-modules or ESM (.ejs)? Here's a detailed breakdown: My goal is to configure tree-shaking with Webpack v5 using babel-loader (adjustable from webpack.*.config.js), Babel v7 with @babel ...

Can someone guide me on creating a slideshow using Ionic?

Having trouble integrating a javascript/css slideshow into Ionic. Ionic does not support the use of ".style" in elements. Need assistance, below is the code: <head> <title>Slideshow</title> <style> .slides {display:none;} </styl ...

Tips for modifying HTML template code within a Typescript document using Atom

There appears to be a current trend in Angular development where the template code is embedded within the Angular component, usually found in a Typescript or Javascript file. However, when attempting this approach, I noticed that I am missing html syntax ...

Reactjs and Typescript - A Powerful Duo

I'm working on creating a Searchbar that will display the author ID and picture based on user input, but I'm encountering an error in my code: any Property 'toLowerCase' does not exist on type 'never' import { useEffect, us ...

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

I have two applications running locally - one is an AngularJS application and the other is an Angular 10 application. I am trying to access a page from the Angular 10 application using an iframe and send a message to it from the AngularJS application. How ...

Creating a sidebar in Jupyter Lab for enhanced development features

Hi there! Recently, I've been working on putting together a custom sidebar. During my research, I stumbled upon the code snippet below which supposedly helps in creating a simple sidebar. Unfortunately, I am facing some issues with it and would greatl ...

Comparison: executing an immediately invoked function expression (IIFE) and a separate

During my recent refactoring of some legacy code, I stumbled upon the following example: // within another function const isTriggerValid = await (async () => { try { const triggers = await db.any(getTriggerBeforeBook, { param ...

The client app automatically handles authentication when using Composer-rest-server

I've been working on a web app using Angular that will be integrating with Hyperledger Composer's REST API. Authentication has been set up using Google Passport. When accessing through a browser, an access token is displayed at the top. This to ...

Eslint is back and it's cracking down on unused variables with no

I've configured eslint to alert me about unused variables rules: { '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], } Presently, I have a TypeScript class structured like this: import { User } from &ap ...

Tips for converting Javascript require to Typescript import using the const keyword

Recently, I've been attempting to import faktory_worker_node from github.com/jbielick/faktory_worker. The README provides the following instructions: const faktory = require('faktory-worker'); faktory.register('ResizeImage', asyn ...

Incorporating onPause and onResume functionalities into a YouTube video featured on a page built with Ionic 2

I'm encountering a minor problem with a simple demo Android app built in Ionic 2. Whenever a Youtube video is playing on the Homepage, if the power button is pressed or the phone goes into sleep/lock mode, the Youtube video continues to play. This is ...

Utilizing distinct AngularJS controller files within a Laravel&Angular collaboration project

I attempted to implement this solution: However, I encountered the following error: GET http://localhost:8000/js/TaskController.js net::ERR_ABORTED 404 (Not Found) Afterwards, I explored another solution: https://github.com/angular/angular-cli/issues ...

Issues with accessing view variables within a directive query are persisting

I am struggling with a specific directive: @Directive({ selector: '[myDirective]' }) export class MyDirective implements AfterViewInit { @ViewChild('wrapper') wrapper; @ViewChild('list') list; ngAfterViewInit() { ...

What is the process for unsubscribing through an HTTP post request within an Angular application

There is a POST API set up through API Gateway on AWS, but it seems to be returning an infinite loop of arrays, as shown in the image below. How can I make it return just one array? Multiple requests Below is the code snippet: Angular import { Componen ...