Correct way to implement a loader inside an observable HTTP call?

Question

I'd like to set a "loading" variable for a login method:

The login method:

public login(authDetails:any):any{
  return this.http.post<any>('https://myapi.com/session', authDetails).pipe(
    map(response  => {
        this.sessionStore.update(response.data.attributes)
      }
    )
  )
}

tho loading variable can easily be set via this.sessionStore.setLoading(true/false).

It's clear where I can call setLoading(false) but since the .subscribe method is going to be called externally, I don't know where where to put setLoading(true).

The place where loading is switched off is clear

(Update: it's not: see the comments below but in short the .setLoading(false) call should happen in a .finalize method so that it happens even when there are errors)

public login(authDetails:any):any{
  return this.http.post<any>('https://myapi.com/session', authDetails).pipe(
    map(response  => {
        this.sessionStore.update(response.data.attributes)

        // I can be confident that the HTTP response has  
        // concluded and setLoading to false here:
        this.sessionStore.setLoading(false); // <= Loading ended
      }
    )
  )
}

Where is loading switched on?

.setLoading(true) needs to be called when the observable is subscribed to. I'd like to keep the loading behaviour contained within this function so that it's reused along with the function itself but it's not clear to me how I would call setLoading(true) in sync with the observable having been subscribed to.

In the old pre-observable world there would have probably been an onSubscribe event that I could have used but I've a feeling that's not how things are done in RxJS.

Do you even need to wait for .subscribe() or is it implicit?

Is it just as simple as putting it immediately at the top of the method? I'm hesitant just because it's not explicitly clear to me that it has been subscribed at the point that that code is parsed.

public login(authDetails:any):any{

  this.sessionStore.setLoading(true); // <= Correct?!

  return this.http.post<any>('https://myapi.com/session', authDetails).pipe(
    map(response  => {
        this.sessionStore.update(response.data.attributes)
        this.sessionStore.setLoading(false); // <= Loading ended
      }
    )
  )
}

score 4 · Answer 1 · answered Jul 15 '20 at 15:27

4

You can start before call observable method and you can finish it in finalize() method because you can get success or error from server. in finalize you will enter in both situation. You can check this link to usage of this method Observable Finally on Subscribe

answered Jul 15 '20 at 15:27

mr. pc_coder

16,412
3
32
54

Very good spot on the `finalize()` point, I hadn't noticed that - thank you – Peter Nixey Jul 15 '20 at 15:56
I wasn't aware of the finalize() method either. Thanks! – lopezbertoni Jul 15 '20 at 17:53
@pc_coder I have a question - when you say you can start before calling the observable method - do you mean doing so outside of this class? If so it removes the encapsulation - I'd like to keep the `setLoading(true)` encapsulated with the rest of the method – Peter Nixey Jul 16 '20 at 15:40

Correct way to implement a loader inside an observable HTTP call?

The login method:

The place where loading is switched off is clear

Where is loading switched on?

Do you even need to wait for .subscribe() or is it implicit?

1 Answers1