rxjsの新しいemmisionに関するAjaxリクエストをキャンセルする

Question

私はリアクティブプログラミングには新しく、AJAXナビゲーションサイドナビゲーションの作成に問題があります。

<ul> 
    <li>change_password</li> 
    <li>update_profile</li> 
</ul> 
<h3> The result </h3> 
<div id="theContent"></div> 

<script type="text/javascript"> 
var listClick$ = Rx.Observable.create(function(observer){ 

      $('li').click(function(){ 

       let pageName = $(this).html();  
       observer.next(pageName); 

      }); 

     }).startWith('change_password').flatMap(function(pageName){ 

      return Rx.Observable.fromPromise($.getJSON('http://localhost:3000/settings/'+pageName));   
     }); 
listClick$.subscribe(function(gottenJson){ 

$('#theContent').html(gottenJson.page); 
}); 
</script> 

CHANGE_PASSWORDまたはupdate_profile i上をクリックすると、AJAX要求が行われたが、CHANGE_PASSWORDのものが遅れている、それがクリックされた後、update_profileがクリックされたときに、update_profileフォームが表示されているが、その後ときCHANGE_PASSWORD形に置き換えられますそれは完了です。

別のリストアイテムをクリックしたときに、最初のAJAXリクエストをキャンセルするにはどうすればよいですか？

Answer 1

新しいエミッションが生成されたときに、前のストリーム（あなたのAjaxコール）の購読を取り消すswitchMapを使用できます。

そう言われています。約束のAjaxバージョンを使用しているので、そのリクエストをキャンセルする方法はありません。したがって、switchMapがキャンセルのフックを提供しても（unsubscribe）、約束はそれに作用しません。

ObservableバージョンにはRx.Observable.ajaxを使用できます。完了する前に退会すると、この通話は中止されます。 AFAIKはDOMに依存しているので、nodejs環境では、非DOM環境で動作しているときにxhrをxhr2に置き換えてuniversal Ajax npm packageを使用できます。