如何在rxjs @ 5中創建一個異步管道？

Question

如何製作類似於下面的代碼？

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

事件點擊收集數據並創建一個請求對象。 然後調用.next（請求）。我如何獲得[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}`)) 

Answer 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}`))