javascript - 如何组合两个 Observable 并使用第一个 Observable 返回值

Question

我有两个 Observable ，第二个 Observable(convertScore$) 需要使用第一个 Observable (displayScore$) 的返回值。

我使用 do 运算符可以组合两个主要的 Observerbles，但是第一个 Observable(displayScore$) 内的第二个 do 运算符(function:fakeImgSrcFromHttp) 无法执行，为什么？

<小时/>

我预期的结果是:

• 隐藏分数:100至其他数据
• 将 ImgSrc 绑定(bind)到 HtmlTag:它是一个 src 字符串
• 显示分数:100
• 完成

这是我的代码，或 you can view it from JSBIN

/***** From A Service *****/
var convertScore$ = fakeScoreFromHttp()
              .do(score => covertScoreToOtherData(score))
              .do(score => {
                fakeImgSrcFromHttp(score)
                .do(imgSrc => {
                  console.log("bind ImgSrc to HtmlTag:" + imgSrc);
                })
              });

function fakeScoreFromHttp(){
  return Rx.Observable.of(100);
}

function fakeImgSrcFromHttp(score){
  // ToDo : if score is something, then do else do....
  
  // return
  return Rx.Observable.of("it's a src string");
}

function covertScoreToOtherData(score){
  console.log("covert score:" + score + " To OtherData")
}

/***** From B Service *****/
var displayScore$ = convertScore$.do(score => displayScore(score));
                
displayScore$.subscribe({
    // next: (value) => { },
    // error: (err) => { console.log('Error: ' + err); },
    complete: (score) => { 
      console.log('complete'); 
    }
});

function displayScore(score){
  console.log("display score:"+score);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>

Answer 1

使用运算符 - flatMap

var example = fakeScoreFromHttp()
          .do(score => covertScoreToOtherData(score))
          .flatMap(score => {
          return  fakeImgSrcFromHttp(score)
            .do(imgSrc => {
              console.log(imgSrc);
            })
          });

example.subscribe({
// next: (value) => { console.log(value); },
// error: (err) => { console.log('Error: ' + err); },
// complete: () => { console.log('complete'); }
});


function fakeScoreFromHttp(){
return Rx.Observable.of(100);
}

function fakeImgSrcFromHttp(score){
  // ToDo : if score is something, then do else do....

 // return
return Rx.Observable.of("it's a src string");
}

function covertScoreToOtherData(score){
 console.log("covert score:" + score + " To OtherData")
}