CODEWITHSUNDEEP
javascriptangulartypescripthttprxjs
itaydafna
itaydafna

Reputation: 2086

sequencing/queuing http request batches with rxjs

I'm trying to figure out how to queue outgoing api request batches using RxJs.

My goal on this sample angular app is to simultaneously send out 3 "random-cat-facts" API requests and only once they resolve send out 2 additional "random-activity" requests:

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { forkJoin, concat } from "rxjs";
import { combineAll } from "rxjs/operators";

const RANDOM_CAT_FACTS_API = "https://catfact.ninja/fact";
const RANDOM_ACTIVITY_API = "https://www.boredapi.com/api/activity";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  fetchSequential() {
    const catFactsObservables = [
      this.http.get(RANDOM_CAT_FACTS_API),
      this.http.get(RANDOM_CAT_FACTS_API),
      this.http.get(RANDOM_CAT_FACTS_API)
    ];

    const activitiesObservables = [
      this.http.get(RANDOM_ACTIVITY_API),
      this.http.get(RANDOM_ACTIVITY_API)
    ];

    const sequencedObservables = [
      forkJoin(catFactsObservables),
      forkJoin(activitiesObservables)
    ];

    concat(sequencedObservables)
      .pipe(combineAll())
      .subscribe((p) => console.log({ p }));
  }
}

I'm clearly doing something wrong since currently all 5 requests are sent out simultaneously.

How can I use RxJs in order to send out the activitiesObservables requests only once the catFactsObservables requests have been resolved?

Additionally, is there a way to get the subscribe callback to trigger only once both batches have been resolved - thus containing the responses for all 5 requests and not firing a separate event for each batch?

Sandbox:

https://codesandbox.io/s/mystifying-gauss-cfcj0z?file=/src/app/app.component.ts:700-721

Upvotes: 0

Views: 198

Answers (2)

itaydafna
itaydafna

Reputation: 2086

In the end I managed to solve this based on @gil's answer and this answer using a combination of concatAll and reduce.

    concat(sequencedObservables)
      .pipe(
        concatAll(),
        reduce((acc, res) => {
          acc.push(res);
          return acc;
        }, [])
      )
      .subscribe((p) => console.log(p));

Upvotes: 2

gil
gil

Reputation: 2552

what you have to do is to use concatAll operator instead of combineAll operator.

this way, the second observable won't emit before the first one did.

your code would look like this:

concat(sequencedObservables)
      .pipe(concatAll())
      .subscribe((p) => console.log({ p }));

Upvotes: 1

Related Questions