Promise 与 RXJS的区别

回调地狱与 Promise

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

Promise 与 RXJS的区别_第1张图片

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

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个,请看下图:

Promise 与 RXJS的区别_第2张图片

依次给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 的优势所在,有一些朋友可能没遇到过这种场景,我来解释一下,以防万一。

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

Promise 与 RXJS的区别_第3张图片

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

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

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

你可能感兴趣的:(angular重点难点)