Angular RXJS Make multiple http parallel calls after first request get done

Question

After receiving the initial request response, I need to perform three parallel requests in my ngrx Effect. I implemented the following, however when I inspect it using the network tab, all three requests are queued. and all queries are executed sequentially.

I WANT TO MAKE THREE PARALLEL REQUESTS.

HOW TO VERIFY WHETHER A FORK JOIN RESULT IS UNDEFINED OR NOT.

fetchDataTotallyWhenUserLogIn$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(fetchDefaultSitePerUser),
      switchMap(() => {
        return FIRST REQUEST (params)
          .pipe(
            this.startWithTap(() => this.store.dispatch(setLoadingSpinner({showLoading: true}))),
            filter(firstReqResponse=> firstReqResponse!== undefined),
            tap(firstReqResponse => {
              if (firstReqResponse === null) {
                throw "The user's default site has not been assigned."
              } else {
                sessionStorage.setItem(Foo, JSON.stringify(firstReqResponse));
              }
            }),
            map(firstReqResponse => firstReqResponse),
        concatMap(firstReqResponse =>
         //I NEED MAKE FOLLOWING REQUESTS AS PARALLEL
          forkJoin([
            PARALLEL_REQUEST_01(firstReqResponse ),
            PARALLEL_REQUEST_02(firstReqResponse ),
            PARALLEL_REQUEST_03(firstReqResponse )
          ]).pipe(
            filter(response => response !== undefined),
            map(([PARALLEL_REQUEST_01_RESP, PARALLEL_REQUEST_02_RESP, PARALLEL_REQUEST_03_RESP]) => {
              return LastAction(
                {
                  a: PARALLEL_REQUEST_01_RESP,
                  b: PARALLEL_REQUEST_02_RESP,
                  c: PARALLEL_REQUEST_03_RESP,
                  d: firstReqResponse 
                })
            })
          )
        ),
        // Catch errors thrown above
        catchError(this.exceptionRxjs.handleRxJsError),
        finalize(() => this.store.dispatch(setLoadingSpinner({showLoading: false})))
      )
  })
)

})

how did you solve it?

Johan Stiven Hernandez Osorio
– Johan Stiven Hernandez Osorio

2022-10-06 15:09:51 +00:00
Commented Oct 6, 2022 at 15:09 — Johan Stiven Hernandez Osorio
– Johan Stiven Hernandez Osorio, Commented Oct 6, 2022 at 15:09

timdeschryver · Accepted Answer · 2022-05-12 17:08:07Z

1

Use the merge operator:

https://timdeschryver.dev/snippets#multiple-service-calls-from-an-effect

refresh$ = createEffect(() =>
  this.actions$.pipe(
    ofType(CustomerActions.refresh),
    exhaustMap(({ customerIds }) =>
      merge(
        ...ids.map((id) =>
          this.customersService.getCustomer(id).pipe(
            map(CustomerActions.getCustomerSuccess),
            catchError((err) =>
              of(CustomerActions.getCustomerFailed(id, err.message)),
            ),
          ),
        ),
      ),
    ),
  ),
)

answered May 12, 2022 at 17:08

timdeschryver

15.6k2 gold badges22 silver badges37 bronze badges

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

1 Comment

Thushara Over a year ago

In your example, it is not required to wait for all requests to succeed, but in my case, I must wait for all requests to succeed before firing action. also i need to make parallel http requests

Collectives™ on Stack Overflow

Angular RXJS Make multiple http parallel calls after first request get done

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related