结合RxJS + AngularJS实现异步处理

         
banq
13-11-22 1 5389 3

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


RxJS:

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


更复杂一些代码,需要调用更多功能:
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); }
);


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


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


压缩:

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

3
lshoo
2013-11-23 19:45

有两者结合的案例吗
[该贴被lshoo于2013-11-23 19:51修改过]