Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

Question

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

I am working with a Django backend and I need to check the status of multiple Celery Tasks () every 3 seconds.

For instance, let's say I have 4 task IDs:

3099023
3493494
4309349
5498458

My goal is to make an http.get<...>(backend) call every 3 seconds for each ID until the state of the task is "FINISHED." The polling should stop once a task is finished.

Is there a straightforward way to accomplish this?

I attempted to implement this using a for loop:

Iterate through the list of IDs
Create a timer for each individual ID
Poll the status of the ID by making an HTTP call to the backend within each timer
Continue polling if the response indicates that the task is not yet finished, otherwise stop polling

angular typescript http django-celery polling

Answer 1

Answer №1

I believe that leveraging rxjs can enhance our solution, as demonstrated in this example showcasing the use of rxjs operators to meet your objective.

PLEASE NOTE: This example simplifies things by excluding Components/Services.

import { interval, of, mergeMap, from, switchMap, takeWhile } from 'rxjs';


const ids = [3099023, 3493494, 4309349, 5498458];

from(ids).pipe(
  mergeMap((id) => 
    interval(3000).pipe(
      switchMap((val) => mockHttpCallExample(val, id)),
      takeWhile((httpResonse) => httpResonse !== 'FINISHED')
  ))).subscribe(val => console.log(val))


const mockHttpCallExample = (val, id) => {
  let httpResponse;

  if (id % 2 === 0 && val === 4) {
    httpResponse = 'FINISHED'
  } else if (id % 2 !== 0 && val === 5) {
    httpResponse = 'FINISHED'
  } else {
    httpResponse = 'OK'
  }

  console.log(id, val);

  return of(httpResponse)
}

What's Happening Here:

The from operator emits a value for each id
In the mergeMap, an http request is made to the API every 3 seconds
The process concludes upon receiving the 'FINISHED' string from the mock API call

Answer 2

I believe that leveraging rxjs can enhance our solution, as demonstrated in this example showcasing the use of rxjs operators to meet your objective.

PLEASE NOTE: This example simplifies things by excluding Components/Services.

import { interval, of, mergeMap, from, switchMap, takeWhile } from 'rxjs';


const ids = [3099023, 3493494, 4309349, 5498458];

from(ids).pipe(
  mergeMap((id) => 
    interval(3000).pipe(
      switchMap((val) => mockHttpCallExample(val, id)),
      takeWhile((httpResonse) => httpResonse !== 'FINISHED')
  ))).subscribe(val => console.log(val))


const mockHttpCallExample = (val, id) => {
  let httpResponse;

  if (id % 2 === 0 && val === 4) {
    httpResponse = 'FINISHED'
  } else if (id % 2 !== 0 && val === 5) {
    httpResponse = 'FINISHED'
  } else {
    httpResponse = 'OK'
  }

  console.log(id, val);

  return of(httpResponse)
}

What's Happening Here:

The from operator emits a value for each id
In the mergeMap, an http request is made to the API every 3 seconds
The process concludes upon receiving the 'FINISHED' string from the mock API call

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

Answer №1

Similar questions

Removing feedback on a particular blog entry

What is the process for utilizing the TypeScript compiler with nodejs?

When using an Angular client to send a request with an access token to Azure AD WebAPI, the response may still show

There is no valid injection token found for the parameter 'functions' in the class 'TodosComponent'

TypeScript excels in typechecking when using two individual assignments, but may encounter issues when attempting typechecking with tuple

A guide on extracting a JSON data with a BigInt type using TypeScript

Refresh the display after adding an item to an array in Angular

What's the best way to use the keyboard's enter key to mark my to-do list

Utilizing AES encryption in C# and decrypting it in Angular, converting it from a byte[] / number array with the help

Adjust the column count in mat-grid-list upon the initial loading of the component

Exploring the versatility of Vue.js through props and scoped slots

Tips for effectively transmitting data while utilizing a declarative/reactive data access method with RxJS in Angular?

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Having trouble with react-i18next not working properly in my React Native application

Global.styles.css not applying background-color in Angular

Establishing global date restrictions for the DatePicker component in Angular 8 using TypeScript across the entire application

Angular2 RC definitions are not recognized by tsc

Challenge your TypeScript skills: convert snake_case to camelCase and back again

Steps to extract key and value from a collection in Firebase database

Understanding the significance of the add() operator in RxJS