Rx如何真正在Web上工作(客户端)

时间:2015-01-21 16:54:40

标签: javascript reactive-programming rxjs

我已经阅读了Rx CodePlex页面上的介绍部分。我看过video of the guy with CascadiaJS。我发现了如何使用RxJS库。我有一个问题是如何帮助我使用现有的Ajax应用程序,我需要在服务器端和客户端进行哪些更改以充分利用RxJS。

方案 我有一个使用ASP.NET Web API编写的REST服务。该服务当前有一个方法,它采用一个坐标数组并返回另一个坐标数组。所以这个电话很简单,就像这样。

 $.ajax({
    url: "http://www.myservice.com/service1/",
    type: "POST",
    data: JSON.stringify(params),
    contentType: "application/json;charset=utf-8",
    success: handle_success,
    error: handle_failure,
    OPTIONS: null,
});

现在上面的调用只是调用一个REST服务,并对结果的结果采取适当的措施。

借助Rx,我听到了#34; Push"而不是拉。我们如何适应" Push"进入上面的样本?我是否要将我的REST服务更改为Listening TCP Socket,我的网页将保持连接(或建立Keep-Alive连接),新值将被推送"。或者这只是一个如上所述的服务电话,但成功/错误只会被引导"通过Observable,一旦调用完成,Observable的工作就完成了?

1 个答案:

答案 0 :(得分:7)

即使不担心将服务器更改为推送到客户端,RxJ也可以帮助您在客户端上编写异步操作。

例如,如果您将ajax调用建模为可观察的:

// each time you subscribe to service, it will execute the ajax call and send back the result
var service = Rx.Observable.defer(function () {
    return $.ajax({
        url: "http://www.myservice.com/service1/",
        type: "POST",
        data: JSON.stringify(params),
        contentType: "application/json;charset=utf-8"
    });
});

// Now fun with Rx

// just call the service like in your OP example:
service.subscribe(handle_success, handle_failure);

// poll the service every 5 seconds
var pollInterval = Rx.Observable.empty().delay(5000);
service
    .concat(pollInterval)
    .repeat()
    .subscribe(success, failure);

// run the service whenever user clicks Refresh
$('#refresh')
    .onAsObservable('click')
    .flatMap(function () { return service; })
    .subscribe(success, failure);

// same as above, but ignore it when user clicks too fast (e.g. faster than 1 second)
$("#refresh")
    .onAsObservable('click')
    .debounce(1000)
    .flatMap(function () { return service; })
    .subscribe(success, failure);