Rx 如何在 web 上真正工作(客户端)
How does Rx really work on web (client side)
我已经在 Rx CodePlex page. I have watched the video of the guy with CascadiaJS 阅读了介绍部分。我发现了如何使用 RxJS 库。我有一个问题,关于它如何帮助我现有的 Ajax 应用程序,以及我必须在服务器端和客户端进行哪些更改才能充分利用 RxJS。
场景
我有一个使用 ASP.NET Web API 编写的 REST 服务。该服务目前有一个方法,它需要一个坐标数组和 return 另一个坐标数组。所以调用很简单,就是这样。
$.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,我听到了"Push"的口头禅,而不是Pull。我们如何将 "Push" 放入上面的示例中?我是否要将我的 REST 服务更改为监听 TCP 套接字,我的网页将保持连接(或建立 Keep-Alive 连接)并且新值将是 "Pushed"。或者这只是一个如上所述的服务调用,但是 success/error 将只是 "channeled" 通过 Observable 并且一旦调用完成,该 Observable 的工作就完成了吗?
即使不用担心更改服务器以推送到客户端,RxJs 也可以帮助您在客户端编写异步操作。
例如,如果您将 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);
我已经在 Rx CodePlex page. I have watched the video of the guy with CascadiaJS 阅读了介绍部分。我发现了如何使用 RxJS 库。我有一个问题,关于它如何帮助我现有的 Ajax 应用程序,以及我必须在服务器端和客户端进行哪些更改才能充分利用 RxJS。
场景 我有一个使用 ASP.NET Web API 编写的 REST 服务。该服务目前有一个方法,它需要一个坐标数组和 return 另一个坐标数组。所以调用很简单,就是这样。
$.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,我听到了"Push"的口头禅,而不是Pull。我们如何将 "Push" 放入上面的示例中?我是否要将我的 REST 服务更改为监听 TCP 套接字,我的网页将保持连接(或建立 Keep-Alive 连接)并且新值将是 "Pushed"。或者这只是一个如上所述的服务调用,但是 success/error 将只是 "channeled" 通过 Observable 并且一旦调用完成,该 Observable 的工作就完成了吗?
即使不用担心更改服务器以推送到客户端,RxJs 也可以帮助您在客户端编写异步操作。
例如,如果您将 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);