结合RxJS + AngularJS实现异步处理

13-11-22 banq
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>

RxJS:

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

更复杂一些代码,需要调用更多功能:

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>

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>

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>

压缩:

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>

3
lshoo
2013-11-23 19:45
有两者结合的案例吗

[该贴被lshoo于2013-11-23 19:51修改过]

猜你喜欢