How to resolve the observable inside another observable? - rxjs

Question

I have an Observable in which I consume another observable, but a second Observable , which I cannot solve. Here is the code:

 return Observable.fromPromise(axios(config)) .map(res => { return { accessToken: res.data.access_token, refreshToken: res.data.refresh_token } }) .map(res => { return { me: getMe(res.accessToken), accessToken: res.accessToken, refreshToken: res.refreshToken } }) function getMe(accessToken) { return Observable.fromPromise(axios.get({ url: 'https://api.spotify.com/v1/me', })); } 

The getMe function returns an Observable , but it is never resolved. I tried to add flatMap and concat , but it is still not resolved. How do I enable getMe ?

Answer 1

You tried the following (also unverified):

 function getMe(accessToken) { return Rx.Observable.fromPromise(axios.get({ url: 'https://api.spotify.com/v1/me', })); } Rx.Observable.fromPromise(axios(config)) .map((res) => { return { accessToken: res.data.access_token, refreshToken: res.data.refresh_token } }) .flatMap((res) => { return getMe(res.accessToken).map((res2) => { res.me = res2; return res; } }) .subscribe((data) => console.log(data)); 

As mentioned in a previous post, flatMap returns the observable. map then used to combine res with the result res2 returned from the second promise.

Also note that fromPromise is an observable cold. This means that you must have a subscription to initiate things. In your case, I suppose you already have something like this:

 someFunction = () => { return Rx.Observable.fromPromise(axios(config)) ... ... } someFunction.subscribe((data) => console.log(data)); 

Answer 2

As @ user3743222 pointed out, Observable does not resolve in the sense that a Promise . If you want to use the value of the getMe method, you will need to subscribe to the Observable returned by it.

 return Observable.fromPromise(axios(config)) .map(res => { return { accessToken: res.data.access_token, refreshToken: res.data.refresh_token } }) .flatMap(function(tokens) { //FlatMap can implicitly accept a Promise return, so I showed that here //for brevity return axios.get({url : 'https://api.spotify.com/v1/me'}); }, //The second method gives you both the item passed into the first function //paired with every item emitted from the returned Observable` //ie axios.get(...) function(tokens, response) { return { accessToken: tokens.accessToken, refreshToken: tokens.accessToken, //Here response is a value not an Observable me: response }; }); 

Answer 3

Sample code that you will find below (UNTESTED !!). Some explanations:

• the observable returned by getMe is not smoothed ("permission" refers to the world of promises) because the map operator does not smooth observables. flatMap do, but you need to use it in the form source.flatMap(function(x){return observable}) , and here you return POJO not a Rx.Observable .
• So, to smooth out getMe , we use flatMap .
• To add the missing fields ( accessToken and refreshToken ), we use withLatestFrom for the observable that emitted the res ( res$ ) object.

• We use share because we subscribe twice to res$ , and we want all subscribers to have the same value.

   var res$ = Observable .fromPromise(axios(config)) .map(function ( res ) { return { accessToken : res.data.access_token, refreshToken : res.data.refresh_token } }) .share(); var getMe$ = res$.flatMap(function ( res ) {return getMe(res.accessToken)}); var finalRes$ = getMe$.withLatestFrom(res$, function ( getMe, res ) { return { me : getMe, accessToken : res.accessToken, refreshToken : res.refreshToken } }); function getMe ( accessToken ) { return Observable.fromPromise(axios.get({url : 'https://api.spotify.com/v1/me'})); }