Tips to avoid multiple HTTP requests being sent simultaneously

Question

Tips to avoid multiple HTTP requests being sent simultaneously

I have a collection of objects that requires triggering asynchronous requests for each object. However, I want to limit the number of simultaneous requests running at once. Additionally, it would be beneficial to have a single point of synchronization after all requests are complete to execute additional code.

I have explored various suggestions from:

Limit number of requests at a time with RxJS

How to limit the concurrency of flatMap?

Fire async request in parallel but get result in order using rxjs

and more... I even attempted to create my own operators.

However, either the solutions provided do not align with my specific requirements or I am struggling to integrate them seamlessly into my existing codebase.

This is the current state of my implementation:

for (const obj of objects) {
  this.myService.updateObject(obj).subscribe(value => {
    this.anotherService.set(obj);
  });
}

EDIT 1: I believe progress is being made! Utilizing the insights from Julius and pschild, I have managed to control the request concurrency. However, only the first batch of 4 requests is triggered while subsequent batches remain inactive. Here's the updated snippet:

const concurrentRequests = 4;
from(objects)
  .pipe(
    mergeMap(obj => this.myService.updateObject(obj), concurrentRequests),
    tap(result => this.anotherService.set(result))
  ).subscribe();

Is there an issue with the way I'm handling the subscribe() method?

By the way: The use of mergeMap with the resultSelector parameter has been deprecated, hence why I omitted it. Also, the reference to obj within the mergeMap function is not accessible in the tap, necessitating the use of the parameter passed to tap.

EDIT 2:

Ensure that your observers complete! (This lesson cost me an entire day)

javascript angular typescript rxjs rxjs-pipeable-operators

Answer 1

Answer №1

If you want to restrict the number of simultaneous inner subscriptions, you can utilize the third parameter of mergeMap. Additionally, you can make use of finalize to run a task after all requests have been completed:

const maxConcurrentRequests = 5;
from(objects)
    .pipe(
        mergeMap(obj => this.myService.updateObject(obj), maxConcurrentRequests),
        tap(res => this.anotherService.set(res))),
        finalize(() => console.log('Sequence complete'))
    );

Check out the demonstration on Stackblitz.

Answer 2

If you want to restrict the number of simultaneous inner subscriptions, you can utilize the third parameter of mergeMap. Additionally, you can make use of finalize to run a task after all requests have been completed:

const maxConcurrentRequests = 5;
from(objects)
    .pipe(
        mergeMap(obj => this.myService.updateObject(obj), maxConcurrentRequests),
        tap(res => this.anotherService.set(res))),
        finalize(() => console.log('Sequence complete'))
    );

Check out the demonstration on Stackblitz.

Answer 3

Answer №2

Using the objects array, this code snippet filters them into batches of 10 and then performs an asynchronous update operation on each object using myService. After updating each object, it also calls another service method to set additional values. Finally, it logs a message indicating that all requests have been completed.

This code is provided as an example and has not been tested. Feel free to ask for clarification or report any errors.

Answer 4

Using the objects array, this code snippet filters them into batches of 10 and then performs an asynchronous update operation on each object using myService. After updating each object, it also calls another service method to set additional values. Finally, it logs a message indicating that all requests have been completed.

This code is provided as an example and has not been tested. Feel free to ask for clarification or report any errors.

Answer 5

Answer №3

I encountered a similar problem in the past while attempting to load multiple images from a server. To address this issue, I had to send HTTP requests sequentially, ultimately achieving my desired outcome by utilizing awaited promises. Below is a snippet of the code I used:

async ngOnInit() {
    for (const number of this.numbers) {
      await new Promise(resolve => {
        this.http.get(`https://jsonplaceholder.typicode.com/todos/${number}`).subscribe(
          data => {
            this.responses.push(data);
            console.log(data);
            resolve();
          }
        );
      });
    }
  }

The key concept here is to resolve the promise upon receiving the response. This approach allows for the implementation of custom logic to execute certain actions once all requests have been completed.

You can view the live demo on StackBlitz. Make sure to check the console for real-time updates! :)

Answer 6

I encountered a similar problem in the past while attempting to load multiple images from a server. To address this issue, I had to send HTTP requests sequentially, ultimately achieving my desired outcome by utilizing awaited promises. Below is a snippet of the code I used:

async ngOnInit() {
    for (const number of this.numbers) {
      await new Promise(resolve => {
        this.http.get(`https://jsonplaceholder.typicode.com/todos/${number}`).subscribe(
          data => {
            this.responses.push(data);
            console.log(data);
            resolve();
          }
        );
      });
    }
  }

The key concept here is to resolve the promise upon receiving the response. This approach allows for the implementation of custom logic to execute certain actions once all requests have been completed.

You can view the live demo on StackBlitz. Make sure to check the console for real-time updates! :)

Tips to avoid multiple HTTP requests being sent simultaneously

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the npm mysql module to malfunction when trying to initiate the 'connect()' function in a separate .js file?

Issue encountered: Unforeseen command: POST karma

Creating a csproj file for an existing project in Angular: A step-by-step guide

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

Creating a robust web application using Laravel API, Sanctum, Angular, and SSO with SAML authentication. Learn how to construct a sophisticated Laravel 7/8 backend API integrated with an Angular 11 front-end and

Storing an array within an AngularJS service for better performance

Update the ngView content on the fly

Embedding a string within an image source attribute in VueJS

Protractor's modal dialogue displays numerous outcomes when accessing ng-repeater elements

Watching a live video stream in real-time using WebRTC with React

Issues with setting default values for controls in Angular's reactive forms

Testing the Viewchild directive in Angular 2

Resetting the selected value in an Angular2 select element after the user makes a change

Utilizing JavaScript and jQuery libraries in conjunction with periods

Testing the branch count of optional chaining in Typescript

In the world of React in Meteor, the command event.preventDefault() doesn't seem

Examining the ngOnChanges function of a child component within an Angular unit test

Unable to display canvas background image upon webpage loading

Steps to hide a div with jQuery when a user clicks outside of a link or the div itself:1. Create a click event

Is there a way to alter the CSS padding class for collapsed elements?