发表于: 2019-06-30 21:42:42

1 756


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 
明天计划的事情:(一定要写非常细致的内容) 
遇到的问题:(遇到什么困难,怎么解决的) 
收获:(通过今天的学习,学到了什么知识)

Observable(可观察对象)与RxJS

1.Observable(可观察对象)

    可观察对象支持在应用中的发布者和订阅者之间传递消息。 在需要进行事件处理、异步编程和处理多个值的时候,可观察对象相对其它技术有着显著的优点。

    可观察对象是声明式的 —— 也就是说,虽然你定义了一个用于发布值的函数,但是在有消费者订阅它之前,这个函数并不会实际执行。 订阅之后,当这个函数执行完或取消订阅时,订阅者就会收到通知。

    作为发布者,创建一个 Observable 的实例,其中定义了一个订阅者(subscriber)函数。 当有消费者调用 subscribe() 方法时,这个函数就会执行。 订阅者函数用于定义“如何获取或生成那些要发布的值或消息”。

   要执行所创建的可观察对象,并开始从中接收通知,就要调用它的 subscribe() 方法,并传入一个观察者(observer)。 这是一个 JavaScript 对象,它定义了你收到的这些消息的处理器(handler)。 subscribe() 调用会返回一个 Subscription 对象,该对象具有一个 unsubscribe() 方法。 当调用该方法时,就会停止接收通知。

  (1)定义观察者

           用于接收可观察对象通知的处理器要实现 Observer 接口。

  (2)订阅

           只有当有人订阅 Observable 的实例时,它才会开始发布值。 订阅时要先调用该实例的 subscribe() 方法,并把一个观察者对象传给它,用来接收通知。

2.RxJS

    (1)http服务

this.http

get(url, { search: params }) 

pipe

map((res: Response) => {

let result = res.json(); 

console.log(result); 

return result;

}), 

catchError((error: any) => Observable.throw(error || 'Server error'))

); 

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

     (2)事件处理

1 this.searchTextStream 

2 .pipe(

3 debounceTime(500), 

4 distinctUntilChanged() 

5

6 .subscribe(searchText =>

7 console.log(this.searchText); 

8 this.loadData(this.searchText)

9 }); 

        这个例子里面最有意思的部分是 debounceTime 方法和distinctUntilChanged 方法,这是一种“去抖动”效果。

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

    这种东西叫做“动态搜索建议”,在用户敲击键盘的过程中,浏览器已经向后台发起了请求,返回了一些结果,目的是给用户提供一些建议。效果看起来很简单,但是如果没有这个 debounceTime 工具函数,我们自己实现起来是非常麻烦的,这里的难点在于:用户敲击键盘的过程是源源不断的,我们并不知道用户什么时候才算输入完成。因此,如果让你自己来从零开始实现这种效果,你将会不得不使用定时器,不停地注册、取消,自己实现延时,还要对各种按键码做处理。

    在 Observable 里面,处理这种情况非常简单,只要一个简单的

debounceTime 加 distinctUntilChanged 调用就可以了。







返回列表 返回列表
评论

    分享到