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  );
  } 

　　结果：

　　　　

 

查看更多关于angular Observable的详细内容...