​


本文翻译自​​TAKING ADVANTAGE OF OBSERVABLES IN ANGULAR 2​​。

在Angular1.x中，我们使用Promise来处理各种异步。但是在angular2中，使用的是Reactive Extensions (Rx)的​​Observable​​​。对于Promise和Observable的区别，网上有很多文章，推荐egghead.io上的这个​​7分钟的视频​​​（作者​​ Ben Lesh​​​）。在这个视频的介绍中，主要说的，使用​​Observable​​​创建的异步任务，可以被处理，而且是延时加载的。这篇文章里，我们主要针对一些在跟服务器端交互的时候遇到的问题，来看看​​Observable​​给我们带来的特性。

实例场景

首先，我们来定义一下问题的场景。假设我们要实现一个搜索功能，有一个简单的输入框，当用户输入文字的时候，实时的利用输入的文字进行查询，并显示查询的结果。

问题

在这个简单的场景当中，一般需要考虑3个问题：

  • 不能在用户输入每个字符的时候就触发搜索。
    如果用户输入每个字符就触发搜索，一来浪费服务器资源，二来客户端频繁触发搜索，以及更新搜索结果，也会影响客户端的响应。一般这个问题，都是通过加一些延时来避免。
  • 如果用户输入的文本没有变化，就不应该重新搜索。
    假设用户输入了’foo’以后，停顿了一会，触发了搜索，再敲了一个字符’o’，结果发现打错了，又删掉了这个字符。如果这个时候用户又停顿一会，导致触发了搜索，这次的文本’foo’跟之前搜索的时候的文本是一样的，所以不应该再次搜索。
  • 要考虑服务器的异步返回的问题。
    当我们使用异步的方式往服务器端发送多个请求的时候，我们需要注意接受返回的顺序是无法保证的。比如我们先后搜索了2个单词’computer’, ‘car’, 虽然’car’这个词是后来搜的，但是有可能服务器处理这个搜索比较快，就先返回结果。这样页面就会先显示’car’的搜索结果，然后等收到’computer’的搜索结果的时候，再显示’computer’的结果。但是，这时候在用户看来明明搜索的是’car’，却显示的是另外的结果。

迎接挑战

在这个实例中，我们使用wikipedia的api接口来开发一个简单的实例，实现简单的搜索功能。

实现搜索

由于只是演示，我们的app里面只包含2个文件: ​​app.ts​​​ 和 ​​wikipedia-service.ts​​​，最终版本的源文件，请参考原文提供的​​demo​​链接。

我们直接来看最初版本的​​WikipediaService​​是如何实现的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}
  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

在这里版本中，使用​​Jsonp​​​模块来请求api结果，它的结果应该是一个类型为​​Observable<Response>​​​的对象，我们把返回的结果从​​Observable<Response>​​​ 转换成
​​​Promise<Response>​​​对象，然后使用它的​​then​​​方法把结果转成json。这样，这个​​search​​​方法的返回类型为​​Promise<Array<string>>​​。
注意上面，我们使用​​response.json()[1]​​方式，从原先的结果中，得到我们需要的查询结果的列表，列表里面都是string。
这个看起来很简单，在angular1.x里面，也基本都是使用​​$http​​​或​​$resource​​​，来返回一个​​Promise​​类型的结果。
下面就是​​app.ts​​的部分内容（因为这只是演示，所以直接在app.ts里面直接定义module和component，并且调用service，在真实的app中，应该创建相应的组件来实现）:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// check the plnkr for the full list of imports
import {...} from '...';
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;
  constructor(private wikipediaService: WikipediaService) {}
  search(term) {
    this.wikipediaService.search(term).then(items => this.items = items);
  }
}

从上面的代码也能看出，​​AppComponent​​​有一个​​search()​​​方法，它调用​​wikipediaService.search()​​​方法，因为这个方法返回一个​​Promise<Array<string>>​​​类型的结果，所以使用​​then()​​​，把结果列表赋值给model对象​​items​​​。上面的​​template​​里面的模板内容就是用来以列表显示查询的结果。
虽然这个实现满足了基本的查询功能，但是对于上面提到的3个问题，都没有能够解决。下面就来修改这个实现来解决上面的问题。
控制用户输入延时
我们先解决第一个问题：当用户输入的时候，不要每次输入一个字符就触发一次搜索，而是设置一个时间延时，当用户停止输入的时间超过400毫秒，就触发搜索。如果用户一直不停的输入，输入的时间间隔小于400ms就不触发。这正是’Observables’能做的事情。
为此，我们需要一个​​Observable<string>​​​对象来保存用户的输入，然后就可以用这个对象提供的方法来实现延时触发的功能。我们可以利用Angular2的指令(directive)​​formControl​​​。要用这个指令，需要引入​​ReactiveFormsModule​​模块。
1
2
3
4
5
6
7
8
9
10
11

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

引入以后，我们就可以在模板里面使用​​FormControl​​来创建表单输入，并给他设置一个变量名​​term​​。
1

<input type="text" [formControl]="term"/>

这样，这个input组件所绑定的变量​​term​​​就是​​FormControl​​​的一个实例，它有一个属性​​valueChanges​​​，这个属性是一个​​Observable<string>​​​类型的对象。我们就可以使用​​Observable<string>​​​的​​debounceTime​​方法来设置触发延时。
1
2
3
4
5
6
7
8
9

export class AppComponent {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
             .debounceTime(400)
             .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

我们看到​​this.term.valueChanges​​是一个​​Observable<string>​​对象，通过​​debounceTime(400)​​我们设置它的事件触发延时是400毫秒。这个方法还是返回一个​​Observable<string>​​对象。然后我们就给这个对象添加一个订阅事件:
1

term => this.wikipediaService.search(term).then(items => this.items = items)

这是用lambda表达式写的一个方法。参数​​term​​​就是​​Observable<string>​​对象经过400ms的延时设置，产生的一个用户输入的字符串。方法体就是用这个参数进行搜索，跟之前版本的处理方式一致。
在这个修改版中，我们把之前的​​search()​​​方法去掉，直接在构造函数​​constructor(...)​​​里面添加的，这相当于，用户在输入框的输入，是一个消息源，会经过​​debounceTime(400)​​的处理，然后产生一个消息，这个消息会发送给订阅的事件处理函数来处理，也就是搜索。所以，我们不需要一个search()方法来控制什么时候触发，而是通过类型订阅的机制来处理用户输入。
防止触发两次
现在我们再来解决第二个问题，就是经过400ms的延时以后，用户输入的搜索条件一样的情况。有了上面的​​Observable​​​，这个就很简单了，​​Observable​​​有一个​​distinctUntilChanged​​的方法，他会判断从消息源过来的新数据跟上次的数据是否一致，只有不一致才会触发订阅的方法。
1
2
3
4

this.term.valueChanges
           .debounceTime(400)
           .distinctUntilChanged()
           .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));

处理返回顺序
上面描述了服务器端异步返回数据的时候，返回顺序不一致出现的问题。对于这个问题，我们的解决办法就比较直接，也就是对于之前的请求返回的结果，直接忽略，只处理在页面上用户最后一次发起的请求的结果。说道忽略之前的请求，如果你们看了上面的视频，或者知道​​Promise​​​和​​Observable​​​的区别的话，就应该想到我们可以利用​​Observable​​​的​​dispose()​​​方法来解决。实际上，我们是利用这种’disposable’特性来解决，而不是直接调用​​dispose()​​方法。（实在不知道该怎么翻译’disposable’，它的意思是我可以中止在Observable对象上的消息处理，字面的意思是可被丢弃的、一次性的。）
上面我们讲到，在service的​​search()​​方法里，我们把​​Jsonp​​返回的结果从​​Observable<Response>​​ 转换成
​​Promise<Response>​​对象。为了利用​​Observable​​的特性去丢弃上一个未及时返回的结果，我们让这个方法还是返回​​Observable​​类型的结果。下面就是修改后的​​WikipediaService​​里面的​​search()​​方法。
1
2
3
4
5
6
7
8
9

search (term: string) {
  var search = new URLSearchParams()
  search.set('action', 'opensearch');
  search.set('search', term);
  search.set('format', 'json');
  return this.jsonp
              .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
              .map((response) => response.json()[1]);
}

注意这个方法最后用​​.map((response) => response.json()[1])​​，意思是对于原先的​​Response​​类型的结果，转换成实际的搜索结果的列表。
​​map()​​以及后面要说到的​​flatMap()​​之类的方法，是函数式编程里面常用到的方法，意思就是将原先的数据集里面的每一条数据，经过一定的处理再返回一个新的结果，也就是把一个数据集转换成另一个数据集。
现在，我们的​​WikipediaSerice​​的返回结果就不是​​Promise​​了，所以我们就需要修改app.ts，我们不能再使用​​then()​​方法来处理结果，而是使用​​subscribe()​​添加一个消息订阅方法。
1
2
3
4
5
6
7
8

this.term.valueChanges
           .debounceTime(400)
           .distinctUntilChanged()
           .subscribe(
              term => this.wikipediaService.search(term).subscribe(
                items => this.items = items
              )
            );

其中，第一个​​subscribe()​​:
1

this.term.valueChanges...subscribe(term => ....)

这个是对输入框产生的查询字符串，注册一个订阅方法，来处理用户的输入。
第二个​​subscribe()​​:
1

this.wikipediaService.search(term).subscribe(items => this.items = items));

是对从服务器端返回的数据查询结果，注册一个订阅方法，来将这个数据赋值到model上。
我们也可以用下面的方式，来避免这样使用多个​​subscribe​​：
1
2
3
4
5

this.term.valueChanges
         .debounceTime(400)
         .distinctUntilChanged()
         .flatMap(term => this.wikipediaService.search(term))
         .subscribe(items => this.items = items);

我们在用户输入的字符串的​​Observable<string>​​​上调用​​flatMap(...)​​​方法，相当于，对用户输入的每个有效的查询条件，调用​​wikipediaService.search()​​方法。然后对这个查询返回的数据，再注册一个订阅方法。
费了这么大的篇幅，希望你明白了​​Observable​​​的​​flatMap​​​和​​subscribe​​用法，对于没有接触过函数式编程的人来说，这确实不好理解，但是在Angular2里面，我们将会大量使用各种函数式编程的方法。所以还是需要你花时间慢慢理解。
费了这么大功夫，上面说的似乎跟’忽略之前未及时返回的消息’好像没什么关系，那么上面的修改到底有没有解决那个问题呢。没有！确实是没有。因为我们使用​​flatMap​​，对用户输入的每个有效的查询字符串，都会调用订阅的那个处理函数，然后更新model。所以我们的问题还是没有解决。
但是到了这一步以后，解决办法就很容易了，我们只需要用​​switchMap​​​代理​​flatMap​​​就可以。就这么简单！这是因为，​​switchMap​​会在处理每一个新的消息的时候，就直接把上一个消息注册的订阅方法直接取消掉。
最后，再优化一下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input type="text" [formControl]="term"/>
      <ul>
        <li *ngFor="let item of items | async">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Observable<Array<string>>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.items = this.term.valueChanges
                 .debounceTime(400)
                 .distinctUntilChanged()
                 .switchMap(term => this.wikipediaService.search(term));
  }
}

我们直接把​​switchMap()​​的结果，赋给model对象​​this.items​​，也就是一个​​Observable<Array<string>>​​类型的数据。这样，在模板里面使用​​items​​的地方也需要修改，使用​​AsyncPipe​​就可以：
1

<li *ngFor="let item of items | async">{{item}}</li>

这样，模板在解析​​items​​​这个model的时候，就会自动解析这个​​Observable​​的结果，再渲染页面。