Observable

1. 想要学好Angular，必先学好Observable
2. 官方描述
   • 可观察对象对在应用的各个部分之间传递消息提供了支持。 它们在 Angular 中频繁使用，并且推荐把它们用于事件处理、异步编程以及处理多个值等场景
   • 观察者是一种软件设计模式，其实就是有一个主题，然后主题关联着一个观察者的列表，每次有人对此主题进行订阅，那么就会把这个人加入到观察者的列表中，每次主题有变化，那么就会通知到所有的观察者啦，这就是观察者模式
   • Observable是声明式的，意思就是说你可以先定义这个Observable对象(就是类似于new出来啦)，但是你不调用其subscribe方法，就不会执行
   • 支持Http响应、事件处理或者其他，比如说可以将定时器定
3. Subscribe
   • 如果要从Observable中接收通知，那么就需要调用Subscribe方法，这样就是把自己加到观察者列表中
   • observer对象，subscribe(observer?: PartialObserver<T>)
     • 传入PartialObserver，此参数定义为三个对象NextObserver<T> | ErrorObserver<T> | CompletionObserver<T>其中的一个，看自己需要，一般使用第一个对象就可以满足
     • 其中NextObserver定义了next方法的必选，此方法主要对于主题订阅后数据发生变化后的回调处理，error和complete方法的可选
     • 其中ErrorObserver定义了error方法的必选，此方法主要对于主题订阅后数据发生变化后的发生异常的回调处理，next和complete方法的可选
     • 其中CompletionObserver定义了complete方法的必选，此方法主要对于主题订阅后数据发生变化后处理完成的回调，next和error方法的可选
     • 查看代码

       // 使用ng的of方法创建一个可观察对象
       const myObservable = of(1, 2, 3);
       
       // 创建一个观察者对象，目的也是为了处理回调
       const myObserver = {
         next: (x: number) => console.log('Observer got a next value: ' + x),
         error: (err: Error) => console.error('Observer got an error: ' + err),
         complete: () => console.log('Observer got a complete notification'),
       };
       
       // 在订阅的时候将观察者对象当做参数传入
       myObservable.subscribe(myObserver);
       
       // Logs:
       // Observer got a next value: 1
       // Observer got a next value: 2
       // Observer got a next value: 3
       // Observer got a complete notification

   • 回调函数，subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void)
     • 定义了三个可选的方法，如上面的observer类似，无非都是使用next,error,complete方法中定义回调的逻辑
     • 查看代码

       
       // 在订阅可观察者的时候直接传入next,error,complete的回调函数
       myObservable.subscribe(
         x => console.log('Observer got a next value: ' + x),
         err => console.error('Observer got an error: ' + err),
         () => console.log('Observer got a complete notification')
       );

4. UnSubscribe
5. 参考资料：observables

搜索

复制