How to chain rxjs observable

Question

I am coming from Angular1, and like chaining promise, I want to have similar behavior.

I have a method in someclass:-

{.........
      doLogin (username, password) {
            .......
            .......
            return this.http.get(api).subscribe(
                    data => {.....}, //enters here
                    err => {.....}
        }

Then I am calling this method :-

 someclass.doLogin(username, password).subscribe(
           data => { }, //Not getting called
            err => { }
 }

As I mentioned as comments on the above code, the subscribe is not getting called in the caller class.

Any suggestion about how to do this ?

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

In fact, you return the object of the subscribe method. It's a subscription and not an observable. So you won't be able to subscribe (again) to the returned object.

Observables allows to build data flow chain based on observable operators. It depends on what you want to do.

If you simply trigger something or set a service property from your service, you could use the do operator and the catch one for error handling:

doLogin (username, password) {
  .......
  .......
  return this.http.get(api).do(data => {
    .....
    // Call something imperatively
  })
  .catch(err => {
    .....
    // Eventually if you want to throw the original error
    // return Observable.throw(err);
  });
}

Don't forget to include these operators since they aren't included out of the box by Rxjs:

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

or globally (all operators):

import 'rxjs/Rx';

See related questions:

edited May 23 '17 at 12:02

Community

1
1

answered Mar 29 '16 at 08:27

Thierry Templier

198,364
44
396
360

This worked! just I was wondering when the catch-err section will get called ? As, when there is 500 error, I was expecting the catch section would get called... – VISHAL DAGA Mar 29 '16 at 08:55
If the request is considered as successful according to the status code (>=200 && <300), the success callback is called otherwise the failure one (catch). See this link: https://github.com/angular/angular/blob/master/modules/angular2/src/http/http_utils.ts#L20 – Thierry Templier Mar 29 '16 at 09:24
In the case of a 500 status code, the failure callback & the one specified with the catch operator should be called... – Thierry Templier Mar 29 '16 at 09:25
I still don't know about how to chain. I want that after the api response is processed in your 'do' function, I want to return some other value (for ex - 'foo') to the subscriber - i.e. in this case, the 'data' in 'someclass.doLogin' (above in my question) will have that returned value (i.e. foo). – VISHAL DAGA Mar 30 '16 at 15:15
2

If you want to chain, you need to use the `flatMap` operator: `return this.http.get(api).flatMap(data => this.http.get(api));`. In this case, the subscribe callback will receive the result of the second get... – Thierry Templier Mar 30 '16 at 15:20
this.http.get(api).flatMap is undefined !, I guess that I need to import the operator using import 'rxjs/add/operator/flatMap'; but its not there in my rxjs (in node_modules)... Thanks for your prompt reply...! – VISHAL DAGA Mar 30 '16 at 15:31
You could try this: `import 'rxjs/Rx'`. It will import all operators (included the `flatMap` one)... – Thierry Templier Mar 30 '16 at 19:20
`flatMap` works for me. I think that this maybe is a better information that the main answer. – Koronos Jun 23 '16 at 22:14

How to chain rxjs observable

1 Answers1