Promise 与 RXJS的区别

回调地狱与 Promise

在使用 Ajax 的过程中，经常会遇到这种情况：我们需要在一个 Ajax 里面嵌套另一个 Ajax 调用，有时候甚至需要嵌套好几层 Ajax 调用，于是就形成了所谓的“回调地狱”：

这种代码最大的问题是可读性非常差，时间长了之后根本无法维护。

Promise 的出现主要就是为了解决这个问题，在 Promise 的场景下，我们可以这样写代码：

new Promise(function(resolve,reject){//异步操作之后用resolve返回data
})
.then(function(data){//依赖于Promise的第一个异步操作
})
.then(function(data){//依赖于Promise的第二个异步操作
})
.then(function(data){//依赖于Promise的第三个异步操作
})
.catch(function(reason){//处理异常
});

很明显，这样的代码可读性就强太多了，而且未来维护起来也很方便。

当然，Promise 的作用不止于此，如果你想更细致地研究 Promise，请看 MDN 上的这篇资料。

RxJS 与 Promise 的共同点

RxJS 与 Promise 具有相似的地方，请看以下两个代码片段：

let promise = new Promise(resolve => {setTimeout(() => {resolve('---promise timeout---');}, 2000);
});
promise.then(value => console.log(value));

let stream1$ = new Observable(observer => {let timeout = setTimeout(() => {observer.next('observable timeout');}, 2000);return () => {clearTimeout(timeout);}
});
let disposable = stream1$.subscribe(value => console.log(value));

可以看到，RxJS 和 Promise 的基本用法非常类似，除了一些关键词不同。Promise 里面用的是 then() 和 resolve()，而 RxJS 里面用的是 next() 和 subscribe()。

RxJS 与 Promise 的3大重要不同点

任何一种技术或者框架，一定要有自己的特色，如果跟别人完全一样，解决的问题也和别人一样，那存在的意义和价值就会遭到质疑。

所以，RxJS 一定有和 Promise 不一样的地方，最重要的不同点有3个，请看下图：

依次给3块代码来示范一下：

let promise = new Promise(resolve => {setTimeout(() => {resolve('---promise timeout---');}, 2000);
});
promise.then(value => console.log(value));

let stream1$ = new Observable(observer => {let timeout = setTimeout(() => {observer.next('observable timeout');}, 2000);return () => {clearTimeout(timeout);}
});
let disposable = stream1$.subscribe(value => console.log(value));
setTimeout(() => {disposable.unsubscribe();
}, 1000);

从以上代码可以看到，Promise 的创建之后，动作是无法撤回的。Observable 不一样，动作可以通过 unsbscribe() 方法中途撤回，而且 Observable 在内部做了智能的处理，如果某个主题的订阅者为0，RxJS 将不会触发动作。

let stream2$ = new Observable(observer => {let count = 0;let interval = setInterval(() => {observer.next(count++);}, 1000);return () => {clearInterval(interval);}
});
stream2$.subscribe(value => console.log("Observable>"+value));

以上代码里面我们用 setInterval 每隔一秒钟触发一个新的值，源源不断，就像流水一样。

这一点 Promise 是做不到的，对于 Promise 来说，最终结果要么 resole（兑现）、要么 reject（拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法，则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的名字所暗示的那样。

let stream2$ = new Observable(observer => {let count = 0;let interval = setInterval(() => {observer.next(count++);}, 1000);return () => {clearInterval(interval);}
});
stream2$.filter(val=>val%2==0).subscribe(value => console.log("filter>"+value));
stream2$.map(value => value * value).subscribe(value => console.log("map>"+value));

在上述代码里面，我们用到了两个工具函数：filter 和 map。

filter 的作用就如它的名字所示，可以对结果进行过滤，在以上代码里面，我们只对偶数值有兴趣，所以给 filter 传递了一个箭头函数，当这个函数的返回值为 true 的时候，结果就会留下来，其它值都会被过滤掉。
map 的作用是用来对集合进行遍历，比如例子里面的代码，我们把 Observable 返回的每个值都做了一次平方，然后再传递给监听函数。

类似这样的工具方法在 Observable 里面叫做 operator（操作符），所以有人说 Observable 就相当于异步领域的 Underscore 或者 lodash，这样的比喻是非常贴切的。这也是 Observable 比较强的地方，Promise 里面就没有提供这些工具函数。

Observable 里面提供了数百个这样的“操作符”，完整的列表和API文档请参考这里。

我也看到有一些朋友在抱怨，说 RxJS 太过复杂，操作符的数量又特别多，不知道在什么场景下面应该用什么操作符。

实际上这种担心是多余的，因为在 RxJS 里面最常用的操作符不超过10个，不常用的操作符都可以在使用的时候再去查阅文档。

RxJS 和你自己开发的系统一样，常用的功能只有其中的20%，而剩余80%的功能可能永远不会被用到。所以，RxJS 并不像很多人说的那么玄乎，你一定能学会，我相信你。

RxJS 在 Angular 的典型应用场景1：http 服务

this.http
.get(url,{search:params})
.map((res:Response) => {let result=res.json();console.log(result);return result;
})
.catch((error:any) => Observable.throw(error || 'Server error'));

在新版本的 Angular 里面，http 服务的返回值都是 Observable 类型的对象，所以我们可以 subscribe（订阅）这个对象。当然，Observable 所提供的各种“操作符”都可以用在这个对象上面，比如上面这个例子就用到了 map 操作符。

RxJS 在 Angular 的典型应用场景2：事件处理

this.searchTextStream
.debounceTime(500)
.distinctUntilChanged()
.subscribe(searchText => {console.log(this.searchText);this.loadData(this.searchText)
});

这个例子里面最有意思的部分是 debounceTime 方法和 distinctUntilChanged 方法，这是一种“去抖动”效果。“去抖动”这个场景非常能体现 Observable 的优势所在，有一些朋友可能没遇到过这种场景，我来解释一下，以防万一。

在搜索引擎里面，我们经常会看到这样的效果：

这种东西叫做“动态搜索建议”，在用户敲击键盘的过程中，浏览器已经向后台发起了请求，返回了一些结果，目的是给用户提供一些建议。

效果看起来很简单，但是如果没有这个 debounceTime 工具函数，我们自己实现起来是非常麻烦的。这里的难点在于：用户敲击键盘的过程是源源不断的，我们并不知道用户什么时候才算输入完成。所以，如果让你自己来从零开始实现这种效果，你将会不得不使用定时器，不停地注册、取消，自己实现延时，还要对各种按键码做处理。

在 Observable 里面，处理这种情况非常简单，只要一个简单的 debounceTime 加 distinctUntilChanged 调用就可以了。