angular Observable
1.回调函数
/** 1.设计实现函数 */ print_msg(msg) { console.log(msg); } /** 2.设计调用函数,param1:实现函数参数,param2:实现函数本身 */ async_read(msg, callback) { callback(msg); } constructor() { /** 3.调用 调用函数 */ this.async_read('我要打印的消息', this.print_msg); }
这样做可以通过3给2传入不同的函数名而实现不同的操作。
2.Promise
study_promise() { const p = new Promise(resolve => { resolve('成功回调'); }).then((res) => { console.log(res); return res; }).then((res) => { console.log(res); }); }
3.Observable
3.1先写一个简单的例子,5s内每隔一秒打印一次‘hello’
constructor() { this.study_observable() .subscribe((res) => { console.log(res); }); } study_observable(): Observable<string> { let i = 0; return Observable.create((observer) => { setInterval(() => { i++; observer.next('hello_' + i); if (i === 5) { observer.complete(); } }, 1000); }); }
3.2 of创建Observable 并订阅一个Observer
ngOnInit() { this.getdata(); } getdata() { const myObservable = of(1, 2, 3); const myObserver = { next: x => console.log('next' + x), error: err => console.error('error' + err), complete: () => console.log('complete') }; myObservable.subscribe(myObserver); }
of创建一个可观察对象,上面的代码等价于
ngOnInit() { this.getdata(); } getdata() { // const myObservable = of(1, 2, 3); const myObservable = new Observable(this.sequenceSubscriber); const myObserver = { next: x => console.log('next' + x), error: err => console.error('error' + err), complete: () => console.log('complete') }; myObservable.subscribe(myObserver); } sequenceSubscriber(observer: Observer<any>) { observer.next(1); observer.next(2); observer.next(3); observer.complete(); return { unsubscribe() { } }; }
3.3 页面 Async 管道
<div>{{time$ | async}}</div>
这样写就相当于订阅了time$,会实时接收next过来的值,
Observable定义如下,用来逐秒打印时间,
页面接收的值类型为Observable<T>,下方为string
time$: Observable<string>; ngOnInit() { this.time$ = new Observable(observer => { setInterval(() => { observer.next(new Date().toString()); }, 1000); }); }
若是要接收object对象,需要这样取值
<ng-container *ngIf="time$ | async as time"> <div> {{time.date}} {{time.time}} </div> </ng-container>
ts:
time$: Observable<object>; ngOnInit() { this.time$ = new Observable(observer => { setInterval(() => { const e = new Date(); observer.next({ date: e.toDateString(), time: e.toTimeString() }); }, 1000); }); }
3.4 Object
既可以作为Observable、也可以作为Observer
支持多播
constructor() { const subject = new Subject(); /*作为被观察者 支持多播 可以订阅多个观察者 */ subject.subscribe( { next: x => console.log('A:' + x) } ); subject.subscribe( { next: x => console.log('B:' + x) } ); /*发送值 */ subject.next(1); subject.next(2); /*Subject作为观察者,可以被Observalbe订阅 */ const fo = of(1, 2, 3); fo.subscribe(subject); }
结果:
3.5 BehaviorSubject 是 Subject的子类
它有一个“当前值”的概念,保存了发送给消费者的最新值。
并且当有新的观察者订阅时,会立即从 BehaviorSubject
那接收到“当前值”。
constructor() { const bs = new BehaviorSubject(0); // 给一个当前值(初始值) bs.subscribe({ next: v => console.log('A' + v), }); bs.next(1); bs.subscribe({ next: v => console.log('B' + v) }); bs.next(2); }
结果:
3.6 ReplaySubject 是Subject的子类
发送旧值给新的订阅者
constructor() { const bs = new ReplaySubject(3); // 回放三个值 bs.subscribe({ next: v => console.log('A' + v), }); bs.next(1); bs.next(2); bs.next(3); bs.next(4); bs.subscribe({ next: v => console.log('B' + v) }); bs.next(5); }
结果:
3.7 AsyncSubject 是Subject的子类
只有当 Observable 执行完成时(执行 complete()
),它才会将执行的最后一个值发送给观察者。
constructor() { const bs = new AsyncSubject(); bs.subscribe({ next: v => console.log('A' + v), }); bs.next(1); bs.next(2); bs.next(3); bs.next(4); bs.subscribe({ next: v => console.log('B' + v) }); bs.complete(); bs.next(5); }
结果: