Data Polling on the Frontend for Long-Running HTTP Requests: Angular Example

**cart.component.ts**

import { Component, OnInit } from '@angular/core';

import { take } from 'rxjs';

import { HttpService } from '../../modules/shared/services/http.service';
import { AuthService } from '../../modules/shared/services/auth.service';

@Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html',
    styleUrl: './cart.component.scss',
})
export class CartComponent implements OnInit {
    constructor(
        private readonly httpService: HttpService,
        private readonly authService: AuthService,
    ) {}

    ngOnInit() {}

    private executePurchase(selectedGoodsIds: Array<string>): void {
        const params = {
            userId: this.authService.currentUserId,
            goods: [...selectedGoodsIds],
        };
        this.httpService
            .executePurchase(params)
            .pipe(take(1))
            .subscribe({
                next: res => {
                    console.log(res); //here your logic
                },
                error: err => console.error(err),
            });
    }
}

**http.service.ts**

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable, catchError, delay, filter, map, of, startWith, switchMap, timer } from 'rxjs';

import { AppConfig } from '../../../configs/app.config';
import { IResponse } from '../interfaces/response.interface';
import { ParsePurchaseService } from './parse-purchase.service';
import { IPurchase, IExecutePurchaseResponse } from '../interfaces/purchase.interface';

@Injectable({
    providedIn: 'root',
})
export class HttpService {
    constructor(
        private readonly http: HttpClient,
        private readonly parsePurchaseService: ParsePurchaseService,
    ) {}

    public executePurchase(params: IPurchase): Observable<IExecutePurchaseResponse> {
        return this.executePurchaseRequest(params);
    }

    public pollData(url: string, interval: number): Observable<any> {
        return timer(0, interval).pipe(
            startWith(null), // Start with null to avoid immediate emission at the beginning
            delay(interval),
            switchMap(() => this.http.get<any>(url)),
            catchError(error => {
                throw new Error(`Polling error: ${error}`);
            }),
        );
    }

    private executePurchaseRequest(params: IPurchase): Observable<IExecutePurchaseResponse> {
        return this.http.post<IResponse>(`${AppConfig.API_URL}/purchase/execute`, params).pipe(
            switchMap(data => {
                if (data.status === 200) {
                    return of(data).pipe(
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                } else if (data.status === 202 && data.data.taskId) {
                    return this.pollData(
                        `${AppConfig.API_URL}/purchase/execution-status/${data.data.taskId}`, //every 5 seconds poll server
                        5000,
                    ).pipe(
                        filter(res => res?.data?.status === 'done'),
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                } else {
                    return of(data).pipe(
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                }
            }),
            catchError(error => {
                throw error;
            }),
        );
    }
}