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
posted @   北月、大魔王  阅读(430)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示