RxJS Observable——理解观察者模式

Observable——理解观察者模式

观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。——《ECMAScript 6 入门

一 理解三个概念

js对象是属性和函数的集合

  1. observable(可观察对象):由Rx.Observable.create 或创建操作符创建的的对象
  2. observer(观察者对象):一个回调函数的集合
  3. subscribe(订阅):可以理解为一个订阅事件,当订阅事件发生时,observer(观察者对象)会根据observable(可观察对象)里对observer对象的回调函数的调用来执行函数

 二 创建observable(可观察对象)

var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

Rx.Observable.create()参数是一个subscribe函数,subscribe函数的参数是一个observer(观察者对象)。subscribe函数里调用observer对象的next()函数。

三 创建 observer(观察者对象)

var observer = {
    next: (x) => {console.log(x)},
    err: (err) => {console.log(err)},
    complete: () => {console.log("complete")}
}

四 observer(观察者对象)订阅observable(可观察者对象)

observable.subscribe(observer);

 执行结果:

>1
>2
>3
>complete

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用RxJS库中的Observable和Subject来处理数据流可以帮助你更好地管理和处理异步操作。 首先,你需要在Angular项目中导入RxJS库: ```typescript import { Observable, Subject } from 'rxjs'; ``` 接下来,你可以使用Observable来创建一个可观察对象,它可以发出一个或多个值,并且可以被订阅进行监听。例如: ```typescript const myObservable = new Observable((observer) => { observer.next('Hello'); observer.next('World'); observer.complete(); }); ``` 在上面的示例中,我们创建了一个Observable,它发出了两个值('Hello'和'World'),然后通过调用`complete()`方法来表示数据流结束。 你还可以使用Subject来创建一个可观察的主题,它既是一个观察者,也是一个可被订阅的对象。它可以用来向订阅者广播值或事件。例如: ```typescript const mySubject = new Subject<number>(); // 向主题发送数据 mySubject.next(1); mySubject.next(2); // 订阅主题接收数据 mySubject.subscribe((value) => { console.log(value); // 输出:1, 2 }); ``` 在上面的示例中,我们创建了一个Subject并向其发送了两个值(1和2),然后通过订阅Subject来接收这些值。 除了上述示例之外,RxJS还提供了丰富的操作符和方法,可以帮助你对数据流进行转换、过滤、组合等操作。你可以使用这些操作符来处理异步操作、处理HTTP请求、处理用户输入等场景。 总结起来,使用RxJS中的Observable和Subject可以帮助你更好地处理和管理数据流,使你的代码具备更好的可读性和可维护性。你可以根据具体的需求使用RxJS提供的操作符和方法来进行进一步的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值