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

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

Angular component fails to render when passed as a string in the innerHtml attribute

What is the evaluation process for conditions like someItem?.someField==somevalue in Angular?

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content

Troubleshooting: ng-disabled not function properly in Angular.js

Tips on slowing down the Jquery UIBlock Plugin

Encounter the following issue: Unable to access property '0' due to being undefined

develop the following application and execute the npm run dev command, but encounter the error message: "Command failed with exit code 1."

I am looking to incorporate a new "ID" column into my mui data grid table in ReactJS that will incrementally count from 0 to the total number of rows

The forEach method in JavaScript seems to work asynchronously

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

Using Vuex: Delay dispatch of action until websocket response received

Enhancing the appearance of individual cells within an HTML table by applying custom classes

Updates to TypeScript 2.3.1 creating disruptions in SystemJS plunk

The type 'typeof globalThis' does not have an index signature, therefore the element is implicitly of type 'any'. Error code: ts(7017) in TypeScript

Developing a JavaScript library that utilizes flow type annotations and provides access to various data types

Using the `import.meta` meta-property is restricted to the `es2020`, `esnext`, or `system` options in snowpack+testing-library and will result in an error

What is the method for utilizing a function's input type specified as "typeof A" to output the type "A"?

There is no XHR request sent when invoking the http function

Having trouble understanding why getStaticProps function is not loading before the main exported function