Using rxjs to execute http call sequentially

Question

I have those 4 api calls

1. HttpService.PostAsync<any, any>(`post_update_ac_translates`)
2. HttpService.PostAsync<any, any>(`post_start_auto_ac_mapping`)
3. HttpService.PostAsync<any, any>(`get_std_leaf_ac_items`)
4. HttpService.PostAsync<any, any>(`get_all_ac_translates`)

I want to execute them in this order

first execute 1, when completed 2, then after 2 is completed, 3 and 4 in the same time.

I tried to do this like this :

concat(
    HttpService.PostAsync<any, any>(`post_update_ac_translates`, {p_id: this.props.projectId, ac_trans: data}, HttpService.AuditcoreAPIBasePath),
    HttpService.PostAsync<any, any>(`post_start_auto_ac_mapping`, {p_id: this.props.projectId}, HttpService.AuditcoreAPIBasePath)
).subscribe(() => {
    forkJoin(
        HttpService.GetAsync<any, any>(`get_std_leaf_ac_items`, {p_id: this.props.projectId}, HttpService.AuditcoreAPIBasePath),
        HttpService.GetAsync<any, any>(`get_all_ac_translates`, {p_id: this.props.projectId}, HttpService.AuditcoreAPIBasePath)
    ).subscribe(([resp1, resp2]) => {

But the code is executing has follow

1 => 3/4 => 2 => 3/4

instead of

1=> 2 => 3/4

doing

HttpService.PostAsync<any, any>(`post_update_ac_translates`, {p_id: this.props.projectId, ac_trans: data}, HttpService.AuditcoreAPIBasePath).concat(

return an error

Property 'concat' does not exist on type 'AxiosObservable'.ts(2339)

HaaLeo · Accepted Answer · 2022-02-21 16:30:20Z

2

Instead of nesting the subscribe() calls, I would suggest the following method of chaining RxJS pipeable operators, as it might look cleaner.

HttpService.PostAsync<any, any>(`post_update_ac_translates`)
  .pipe(
    switchMap(() => HttpService.PostAsync<any, any>(`post_start_auto_ac_mapping`))
    switchMap(() => forkJoin(HttpService.PostAsync<any, any>(`get_std_leaf_ac_items`), HttpService.PostAsync<any, any>(`get_all_ac_translates`))
  ).subscribe([res1, res2] => {
     console.log(res1);
     // do the rest
  });

First, we use switchMap() to map the observable values from the first HTTP request into an inner observable, followed by making the second HTTP request. Then, we chain another switchMap() operator which will carry out the forkJoin operation which waits for the third and forth HTTP requests to be completed, before we subscribe and return the values from the observable.

edited Feb 21, 2022 at 16:30

HaaLeo

12.1k5 gold badges51 silver badges59 bronze badges

answered Dec 19, 2019 at 3:12

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

3 Comments

Crocsx Over a year ago

thanks that looks great, I just would like to know if it's possible to get the response from 3/4 (so your last switchmap) and execute code using those resp ? is it going to be subscribe([resp1,resp2,resp3,resp4])

Crocsx Over a year ago

I tried subscribe(([resp1, resp2, [resp3, resp4]]) but I got > Tuple type '[AxiosResponse<any>, AxiosResponse<any>]' of length '2' has no element at index '2'

wentjun Over a year ago

@Bobby yes you can! Check my edited answer. By doing so, you will be able to get the responses from the 3rd and 4th HTTP requests

Collectives™ on Stack Overflow

Using rxjs to execute http call sequentially

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related