javascript - 使用 Javascript 进行响应式编程

Question

我是响应式(Reactive)编程的新手，阅读所有这些我无法理解的文章有点迷茫。

实际上，我是一名来自 Nodejs、Angularjs、Angular 2 和 React 的 javascript 开发人员。

我做什么

我一直使用 promises，用于远程数据获取、本地异步解析等......比回调更好的可测试性，满足我的需求。

我对流的理解

除非在特定情况下，否则我不知道流可以在哪里拯救我。

这种特殊情况是，我不能在监听流时使用 promise，因为 promise 只会被解析一次。

SocketIo 示例:

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

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

如果我没记错的话，我可以使用 react 流通过简单地返回一个可观察对象来管理这种情况。对吧？

我不明白的地方

我正在研究 Angular 2 和周围的所有东西。实际上，从许多博客中，人们习惯使用可观察对象来获取远程数据，我不明白使用它而不是 promise 的优势是什么。

事实上，在这两种情况下我都需要制作一个 Remote ，那么为什么一个比另一个多呢？这是性能问题吗？

我需要什么

如果您已经阅读了整个问题，我需要了解的是在远程数据获取的情况下使用响应式(Reactive)编程而不是 promise 的优势是什么？

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

Answer 1

@Günter 为您介绍了 observables 的基础知识，尤其是调用 promises 的能力。

更进一步，我认为可观察对象的关键优势是能够使用运算符构建异步数据流/流。

以下是一些具体的用例:

• 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 请求以相应地执行(对事件使用react)并应用一些高级行为。

• 实现重试。通过混合使用 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