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 = ;
    return Observable.create((observer) => {
      setInterval(() => {
        i++;
        observer.next('hello_' + i);
        if (i === ) {
          observer.complete();
        }
      }, );
    });
  }

3.2 of创建Observable 并订阅一个Observer

  ngOnInit() {
    this.getdata();
  }

  getdata() {
    const myObservable = of(, , );
    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();
    observer.next();
    observer.next();
    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());
      }, );
    });
  }

　　若是要接收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() });
      }, );
    });
  }

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();
    subject.next();

    /*Subject作为观察者，可以被Observalbe订阅 */
    const fo = of(, , );
    fo.subscribe(subject);
  }

　　结果：

　　　　

3.5   BehaviorSubject 是 Subject的子类

　　它有一个“当前值”的概念，保存了发送给消费者的最新值。

　　并且当有新的观察者订阅时，会立即从 BehaviorSubject 那接收到“当前值”。

  constructor() {
    const bs = new BehaviorSubject(); // 给一个当前值（初始值）
    bs.subscribe({
      next: v => console.log('A' + v),
    });
    bs.next();
    bs.subscribe({
      next: v => console.log('B' + v)
    });
    bs.next();
  }

　　结果：

　　　　

3.6  ReplaySubject  是Subject的子类

　　发送旧值给新的订阅者

  constructor() {
    const bs = new ReplaySubject(); // 回放三个值
    bs.subscribe({
      next: v => console.log('A' + v),
    });
    bs.next();
    bs.next();
    bs.next();
    bs.next();
    bs.subscribe({
      next: v => console.log('B' + v)
    });
    bs.next();
  }

　　结果：

　　　　

3.7  AsyncSubject  是Subject的子类

　　只有当 Observable 执行完成时(执行 complete())，它才会将执行的最后一个值发送给观察者。

  constructor() {
    const bs = new AsyncSubject();
    bs.subscribe({
      next: v => console.log('A' + v),
    });
    bs.next();
    bs.next();
    bs.next();
    bs.next();
    bs.subscribe({
      next: v => console.log('B' + v)
    });
    bs.complete();
    bs.next();
  }

　　结果：