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