如何通过Angular2的Observables实现交互式控制功能？

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

在Angular 1.x版本中，我们用Promise处理各种异步操作。但在Angular 2中，我们转向使用Reactive Extensions (Rx) 的Observable。Promise与Observable的主要区别在于，Observable提供了更丰富的处理异步数据流的能力。推荐学习RxJS的资料，可以观看egghead.io上的这个7分钟视频。

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

实例场景

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

问题

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

不能在用户输入每个字符的时候就触发搜索。

如果用户输入每个字符就触发搜索，一来浪费服务器资源，二来客户端频繁触发搜索，以及更新搜索结果，也会影响客户端的响应。一般这个问题，都是通过加一些延时来避免。

如果用户输入的文本没有变化，就不应该重新搜索。