Wie kann ich ein Observable innerhalb eines anderen Observable auflösen? - rxjs

Question

Ich habe eine Observable in der ich eine andere beobachtbare konsumiere, aber die 2. Observable kann ich nicht lösen. Hier ist der 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', 
    })); 
} 

Die getMe Funktion gibt einen Observable, aber es wird nie gelöst. Ich habe versucht, eine flatMap und eine concat hinzuzufügen, aber es ist immer noch nicht gelöst. Wie bekomme ich die getMe zu lösen?

Answer 1

Bitte benutzen Sie die folgenden (auch ungetestet) versuchen:

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)); 

Wie in der obigen Beitrag erwähnt, flatMap eine beobachtbare zurückgibt. map wird anschließend zum Zusammenführen von res mit dem Ergebnis res2 verwendet, das aus dem zweiten Versprechen stammt.

Beachten Sie auch, dass fromPromise eine kalte beobachtbar ist. Dies bedeutet, dass Sie ein Abonnement haben müssen, um Dinge zu initiieren. In Ihrem Fall, ich nehme an, Sie schon so etwas wie diese:

someFunction =() => { 
    return Rx.Observable.fromPromise(axios(config)) 
    ... 
    ... 
} 

someFunction.subscribe((data) => console.log(data)); 

Answer 2

Beispielcode zu finden unten (UNTESTED !!). Einige Erklärungen:

• die beobachtbare zurück von getMe nicht abgeflacht (‚Entschlossenheit‘ gehören zu der Welt der Versprechen), weil der map Betreiber nicht beobachtbaren abzuflachen. flatMap tun, aber Sie müssen es in der Form source.flatMap(function(x){return observable}) verwenden und hier, was Sie zurückgeben, ist eine kein Rx.Observable.
• Also, um die getMe zu plätten verwenden wir eine flatMap.
• Um die fehlenden Felder (accessToken und refreshToken) verwenden wir withLatestFrom auf den beobachtbaren, die das res Objekt emittieren wieder hinzufügen (res$).

• Wir verwenden share, da wir zweimal res$ abonnieren, und wir möchten, dass alle Abonnenten die gleichen Werte sehen.

  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'})); 
  } 
  

Answer 3

Wie @ user3743222 wies darauf hin, tut ein Observableresolve nicht in dem Sinne, dass ein Promise tut. Wenn Sie den Wert der getMe Methode möchten, müssen Sie die von ihm zurückgegebene Observable abonnieren.

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` 
     //i.e. axios.get(...) 
     function(tokens, response) { 
      return { 
      accessToken: tokens.accessToken, 
      refreshToken: tokens.accessToken, 
      //Here response is a value not an Observable 
      me: response 
      }; 
     });