How to wait for the same observable to finish if called twice in angular?

Question

My question is not the same as how to "How to wait for observable to finish". I already solved this issue in my code by using a switchMap. Currently I have an api get call that before doing the httpget, it will check if the refreshToken is expired, in this case it will generate a new token and wait for it then do the httpget which is great.

My problem is that if I have the following senario:

this.getUsers();
this.getLocations();

Let us take the case where the token needs refresh (we need to wait for the refresh): First we call this.getUsers() this will trigger to create a new token and the get users will happen after the token is created. In parallel we also call this.getLocations() which will also trigger to create a new token and will NOT WAIT for the first get to finish. I need to find a way so that the 2nd get waits for the 1st get to finish so that both will use the same new token.

you mean like waiting for the first request to be finish before executing the second request? — Riyenz, Dec 20 '18 at 06:01
They are independent requests but if the first waits for the token to finish, the second get should also wait for it and not ask for a new token — Wael, Dec 20 '18 at 06:30
I think what you want to do is to check first if your token expired before firing the two requests. one thing for you to avoid requesting if you token is expired is storing your token expiration time and date. — Riyenz, Dec 20 '18 at 06:47

score 8 · Answer 1 · edited Dec 21 '18 at 09:13

8

rxjs operator for you to use in this scenario is forkJoin().

Observable.forkJoin(
    this.http.get('/app/getUser').map((res: Response) => res.json()),
    this.http.get('/app/getLocation').map((res: Response) => res.json())
).subscribe(
  data => {
    this.users = data[0]
    this.locations = data[1]
  },
  err => console.error(err)
);

See this Example: Example of stackoverflow

Also see this to take advantage of Observable in Angular: Take Advantage of Observable

edited Dec 21 '18 at 09:13

Mladen

2,070
1
21
37

answered Dec 20 '18 at 06:01

deepchudasama

480
7
18

1

It's only `forkJoin(.....)` from Angular 6 onwards instead of `Observable.forkJoin(....)` – taylorswiftfan Dec 17 '20 at 03:00

score 1 · Answer 2 · answered Dec 22 '18 at 20:59

None of these answers helped with my problem. After doing more research I was able to achieve what I want using rxjs share() which allowed multiple callers to share the same observable and hence the token gets refreshed only once.

getUsers(); will request a refresh token then do the httpget. getLocation(); will detect that a refresh token is requested and hence will share the same observable and not request a new token.

Kamil Kiełczewski · Answer 3 · 2018-12-20T06:58:29.563

To send two request parallel and wait until both are done (code from head):

let [users, locations] = await Promise.all([
  this.getUsers().toPromise(),
  this.getLocations().toPromise()
]);
// `users` and `locations` are ready to use here

However if you wana send first request and when its finish, send second then use:

let users = await this.getUsers().toPromise(),
let locations= await this.getLocations().toPromise();

I assume that your functions this.getUsers() and this.getLocations() return angular http.get(...) observable (remember to put async keyword near function name which use above codes). More info about promises here.

How to wait for the same observable to finish if called twice in angular?

3 Answers3