結合RxJS + AngularJS實現非同步處理

banq發表於2013-11-22
JSAngular非同步
Angular.js的Promise API提供了非同步處理，但是AngularJS只有很少的非同步處理庫支援，如果你寫複雜的非同步處理功能，需要自己編寫庫包。而Reactive Extensions for JavaScript (RxJS)則提供強大的reactive非同步處理。

RxJS中新增了Observable.fromPromise功能，實現RxJS和AngularJS Promise銜接。

簡單比較：
AngularJS Promise:

var res = $resource("/hoge");
res.get().$promise
  .then(
    function(data){ alert("success: " + data); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">


RxJS:

var res = $resource("/hoge");
Rx.Observable.fromPromise(res.get().$promise)
  .subscribe(
    function(data){ alert("success: " + data); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">


更復雜一些程式碼，需要呼叫更多功能：
AngularJS Promise:

var res1 = $resource("/hoge");
var res2 = $resource("/fuga/:id");
res1.get().$promise
  .then(function(data){
    return res2.get({id: data.id}).$promise;
  })
  .then(
    function(data){ alert("success: " + data); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">


RxJS:

var res1 = $resource("/hoge");
var res2 = $resource("/fuga/:id");
Rx.Observable.fromPromise(res1.get().$promise)
  .selectMany(function(data){
    return Rx.Observable.fromPromise(res2.get({id: data.id}).$promise);
  })
  .subscribe(
    function(data){ alert("success: " + data); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">


RxJS更強大的功能，重試幾次連線：

var res = $resource("/hoge")
Rx.Observable.defer(function(){
    return Rx.Observable.fromPromise(res.get().$promise);
  })
  .retry(3)
  .subscribe(
    function(data){ alert("success: " + data); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">


壓縮：

var res1 = $resource("/hoge");
var res2 = $resource("/fuga");
Rx.Observable.fromPromise(res1.get().$promise)
  .zip(Rx.Observable.fromPromise(res2.get().$promise), 
    function(data1, data2){ return [data1, data2]; }
  )
  .subscribe(
    function(data){ alert("success: " + data[0] + ":" + data[1]); }, 
    function(err){ alert("failure: " + err); }
  );
<p class="indent">

相關文章