如何在 rxjs@5 中制作异步管道？答案

【问题标题】：How to make an async pipe in rxjs@5?如何在 rxjs@5 中制作异步管道？
【发布时间】：2016-08-31 14:50:06
【问题描述】：

如何制作类似于以下代码的内容？

.map( async request => await asyncRequest( request ) )

事件点击收集数据并创建请求对象。然后调用 .next(request)。如何获取 [object Promise] 和 json？

let a = Rx.Observable.create( observer => {
  Rx.Observable.fromEvent(document, 'click')
  .do( () => observer.next(  ) )
  .subscribe( result => console.log(`[a] complete`), error => console.log(`a error: ${error}`));
} );


function asyncRequest( request ) {
  return Rx.Observable.create( observer => {
    new Promise( ( resolve, reject ) => {
      setTimeout( ( ) => resolve( 'response' ), 1000 );
    } )
  } )
}

a
  .map( request => asyncRequest( request ) )
  .do( json => console.log(json) ) // to get json
  .subscribe( result => console.log(`complete: ${result}`) )

【问题讨论】：

标签： javascript rxjs rxjs5

【解决方案1】：

您应该使用flatMap 而不是map

let a = 
  Rx.Observable.fromEvent(document, 'click')
    //Console loggin is a side effect, so make it the do instead of 
    //wrapping the Observable
    .do(_ => console.log(`[a] complete`), 
        error => console.log(`a error: ${error}`));


function asyncRequest( request ) {
  //This will actually handle the result of the Promise
  return Rx.Observable.defer(() => 
    new Promise( ( resolve, reject ) => {
      setTimeout( ( ) => resolve( 'response' ), 1000 );
    })
  );
}

a
  //Kicks off an async request each time an event comes in
  //and then flattens the response into the stream.
  .flatMap(asyncRequest)
  .do( json => console.log(json) ) // to get json
  .subscribe( result => console.log(`complete: ${result}`) )

【讨论】：