Create Queue of HTTP requests Angular

Question

I want to create a queue of all the http requests that are being made simultaneously, But the Catch is that we need to update request of next api after every success request, issue is the queue we create saves all the requests as a observables and i can not find a way to update the request from that observable

Request Queue Service

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpEventType } from '@angular/common/http';
import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
import { tap, catchError, switchMap } from 'rxjs/operators'; 

@Injectable({
  providedIn: 'root'
})
export class RequestQueueService {
  public queue: ReplaySubject<any>[] = [];
  updatedRespose = new BehaviorSubject<any>(null);

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const requestQueueItem$ = new ReplaySubject<any>();
    const result$ = requestQueueItem$.pipe(
      switchMap(() => next.handle(request).pipe(
        tap(req => {
          if (req.type == HttpEventType.Response) {
            this.processNextRequest();
          }
        }),
        catchError(err => {
          this.processNextRequest();
          throw err;
        })
      ))
    );

    this.queue.push(requestQueueItem$);
    if (this.queue.length <= 1) {
      this.dispatchRequest();
    }

    return result$;
  }

  private processNextRequest(): void {
    if (this.queue && this.queue.length > 0) {
      this.queue.shift();
    }
    this.dispatchRequest();
  }

  private dispatchRequest(): void {
    if (this.queue.length > 0) {
      const nextSub$ = this.queue[0];
      nextSub$.next();
      nextSub$.complete();
    }
  }
}

Queue Interceptor

@Injectable()
export class QueueInterceptorService implements HttpInterceptor {
  constructor(
    private queueService: RequestQueueService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.queueService.intercept(request, next);
  }
}

used this answer for queue

Thanks in advance

Can you add examples of pseudocode to share what is your goal? — Alejandro Lora
– Alejandro Lora, Commented Jan 17, 2022 at 13:07

Alexander · Accepted Answer · 2022-01-17 12:55:55Z

-1

Just use rxjs map operator. As angular http returns observables youcan map every one of them and put the response of each to the request of the next. if i get what you want right.

answered Jan 17, 2022 at 12:55

Alexander

1381 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

navjot Over a year ago

Actually all requests are running parallelly (by User), but we are creating a queue of all requests and running them synchronously with interceptors, so request would already be added to to queue before we reach to response

Alexander Over a year ago

If thats the case. Just know that you can't change anything when observable is already created. You must create another one.

Collectives™ on Stack Overflow

Create Queue of HTTP requests Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related