RxJs：如何實現HTTP與flatMap

Question

刪除

我有一個非常簡單的例子：

• 有一些條目的table（每一個都具有唯一的ID和索引號）
• 每個條目已刪除button
• onclick：調用subject.onNext其然後執行一個HTTP經由flatMap
• 如果成功刪除呼叫：從表中刪除對應的行
倍

渲染HTML的外觀（簡體）像這樣：

<table> 
    <tr> 
    <td>Entry1</td> 
    <td><button onclick="delete.onNext({id:'a', index:0})"></td> 
    </tr> 
    <tr> 
    <td>Entry2</td> 
    <td><button onclick="delete.onNext({id:'b', index:1})"></td> 
    </tr> 
</table> 

刪除主題/可觀察：

var delete = new Rx.Subject() 
    .flatMap(function(data) { 
     return MyService.doHTTPDelete(data.id); 
    }) 
    .retry() // keep the Subject alive if HTTP call fails 
    .doOnError(function(err) { 
     console.log("Something went wrong...", err); 
    }) 
    .subscribe(function(???) { 
     // here I need the index 
    }); 

正如你所看到的，MyService.doHTTPDelete調用什麼也不知道約data.index（當然它不應該！）。

我認爲這是一個很常見的用例。但是我在網上找不到解決方案。

你有什麼想法如何解決它？

Answer 1

flatMap可以採取第二個函數有兩個參數：原onNext值，和第一函數的flatMap結果：

var delete = new Rx.Subject() 
    .flatMap(function(data) { 
     return MyService.doHTTPDelete(data.id); 
    }, 
    function(originalData, deleteResponse) { 
     // originalData is your id/index object 
     // deleteResponse is the value from the doHTTPDelete 
     return { 
      entry: originalData, 
      response: deleteResponse 
     } 
    }) 
    .subscribe(function(results) { 
     // results.entry is your original onclick data 
     console.log(results.entry.index); 
    }) 

Answer 2

我發現了一些解決方法，這是很簡單的。但我不知道是否有任何可能的副作用或不良行爲：

var delete = new Rx.Subject() 
    .flatMap(function(data) { 
     return MyService.doHTTPDelete(data.id) 
       .map(function() { return data; }); 
    }) 
    ....;