使用Javascript进行反应式编程

Question

我是反应式编程的新手,我读了所有这些我无法理解的文章.

实际上,我是来自Nodejs,Angularjs,Angular 2和React的javascript开发人员.

我所做的

我一直使用promises,用于远程数据获取,本地异步解析等...比回调更好的可测试性并且符合我的需要.

我理解使用流

除了在特定情况下,我无法弄清楚流可以保存在哪里.

这种特殊情况是,我在侦听流时不能使用promises,因为promise只能解析一次.

SocketIo的一个例子:

io.on('connection',  (socket) => {
  // this works
});

io.on('connection').then((socket) => {
  // this can't work, promise would be resolved only once
});

如果我没有错,我可以通过简单地返回一个observable来使用反应流来管理这种情况.对 ？

我不明白

我正在研究Angular 2和周围的所有东西.实际上,从许多博客来看,人们习惯使用observable来获取远程数据,而我无法理解使用它而不是使用promises会有什么好处.

事实上,我需要在两种情况下制作一个遥控器,那么为什么要比另一个更多？这是性能问题吗？

我需要的

如果您已经阅读了整个问题,那么我需要了解在远程数据获取的情况下使用反应式编程而不是承诺的优势是什么？

在哪些(其他情况下)使用反应性东西比通常的东西更好？

Answer 1

@Günter为您提供了可观察的基础,特别是承诺被召唤的能力.

为了更进一步,我认为可观察量的关键优势是能够使用运算符构建异步数据流/流.

以下是一些具体的用例:

• debounceTime/ switchMap.如果要利用表单输入根据相应的HTTP请求过滤列表,则需要用于请求的值是用户完成写入时的值.没有必要发送几个请求:每个新字符一个(一个用于's',一个用于'so',一个用于'som',...,一个用于'搜索').该debounceTime运营商允许这种通过缓存事件,并提供了活动的时间量后最后一个.

  这是一个示例:

  @Component({
    (...)
    template: `
      <input [ngFormControl]="ctrl"/>
    `
  })
  export class MyComponent {
    constructor() {
      this.ctrl = new Control();
      this.ctrl.valueChanges
                 .debounceTime(500)
                 .distinctUntilChanged()
                 .switchMap((vallue: string) => {
                   // Get data according to the filled value
                   return this.service.getData(entry);
                 })
                 .subscribe(data => {
                   // Update the linked list
                   this.list = data;
                 });
    }
  }
  

  如果您只使用switchMap,则每个输入将有一个请求,但之前的进行中请求将被取消.这使您可以获得正确的结果,尤其是在某些请求的请求执行时间较长的情况下.

  在这种情况下,您可以将事件从Web UI(DOM事件)链接到HTTP请求以相应地执行(对事件做出反应)并应用一些高级行为.

• 实施重试.通过混合retryWhen,delay和timeout运营商,你可以很容易地(且透明)实施重试

  searchPlaces(searchText:string) {
    var params = new URLSearchParams();
    params.set('placename_startsWith', searchText);
    params.set('username', 'templth');
  
    return this.http.get('http://api.geonames.org/postalCodeSearchJSON',
        { search: params })
      .retryWhen(error => error.delay(500))
      .timeout(2000, return new Error('delay exceeded'))
      .map(res => res.json().postalCodes);
  }
  

我认为这是可观察的真正力量:异步处理链/数据流,并基于事件链接应用程序的不同部分.这是使用promises无法完成的事情,并允许实现用例以使您的应用程序更加健壮.

以下是一系列可以为您提供更多详细信息的文章:

• https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html
• http://slides.com/robwormald/everything-is-a-stream
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Answer 2

基本上，如果您有一个异步事件，您不想收到有关（回调）的通知，您可以使用Promise. 如果您期望发生一系列事件，请使用Observable

优点Observable超过Promise

• 可观察性可以取消
• Observable 是惰性的（在订阅之前不做任何事情）
• Observable 可以做 Promise 可以做的事情，但只有 usingObservable允许您以相同的方式编码（使用 rx 运算符，而不是.then()无论您期望一个还是一系列事件。