如何通过Angular2的Observables实现交互控制的长尾词方法？

本文共计1989个文字，预计阅读时间需要8分钟。

在Angular1.x中，我们常用Promise处理各种异步操作。而到了Angular2，我们转向使用Reactive Extensions (RxJS) 的Observable。Promise与Observable的主要区别在于：

- Promise是一个完成或失败的结果，而Observable可以发射多个值，支持更复杂的异步数据处理。- Promise提供简洁的API，但Observable提供了更多的操作符，使得数据流处理更加灵活。

推荐学习资源：egghead.io上的7分钟视频，深入理解两者的区别。

在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是如何实现的：

import { Injectable } from '@angular/core'; import { URLSearchParams, Jsonp } from '@angular/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里面，也基本都是使用$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()添加一个消息订阅方法。

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

其中，第一个subscribe():

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

这个是对输入框产生的查询字符串，注册一个订阅方法，来处理用户的输入。

第二个subscribe():

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

是对从服务器端返回的数据查询结果，注册一个订阅方法，来将这个数据赋值到model上。

我们也可以用下面的方式，来避免这样使用多个subscribe：

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会在处理每一个新的消息的时候，就直接把上一个消息注册的订阅方法直接取消掉。

最后，再优化一下代码：

@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就可以：

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

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

Demo地址: Smart Wikipedia search using Angular 2

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。