Estoy tratando de descubrir cómo poner en cola los lotes de solicitudes de API salientes usando RxJs.
Mi objetivo en esta aplicación angular de muestra es enviar simultáneamente 3 solicitudes de API "random-cat-facts" y solo una vez que se resuelvan, enviar 2 solicitudes adicionales de "actividad aleatoria":
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 })); } }Claramente estoy haciendo algo mal ya que actualmente las 5 solicitudes se envían simultáneamente.
¿Cómo puedo usar RxJs para enviar activitiesObservables solicitudes de ActivitiesObservables solo una vez que se hayan resuelto las solicitudes de catFactsObservables ?
Además, ¿hay alguna manera de hacer que la devolución de llamada de subscribe se active solo una vez que se hayan resuelto ambos lotes, por lo que contiene las respuestas para las 5 solicitudes y no activa un evento separado para cada lote?
Salvadera:
https://codesandbox.io/s/mystifying-gauss-cfcj0z?file=/src/app/app.component.ts:700-721
lo que tiene que hacer es usar el operador concatAll en lugar del operador combineAll.
de esta manera, el segundo observable no emitirá antes que el primero.
su código se vería así:
concat(sequencedObservables) .pipe(concatAll()) .subscribe((p) => console.log({ p }));Al final, logré resolver esto según la respuesta de @gil y esta respuesta usando una combinación de concatAll y reduce .
concat(sequencedObservables) .pipe( concatAll(), reduce((acc, res) => { acc.push(res); return acc; }, []) ) .subscribe((p) => console.log(p));