zoukankan      html  css  js  c++  java
  • 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);
      }

      结果:

        

  • 相关阅读:
    Abp Swagger API中文说明配置方法
    ABP框架中使用MySQL数据库
    windows + jenkins + .net core + iis自动化部署新手入门
    在图片上画矩形框
    base64转换成np、opencv、PIL
    RankSVM
    tf.placeholde函数解释与用法
    slim.arg_scope()的使用
    SSD网络结构
    tensorflow学习笔记
  • 原文地址:https://www.cnblogs.com/wskxy/p/10454955.html
Copyright © 2011-2022 走看看