异步编程:rxjs的认识

一、常见的异步编程有

• 1、回调函数
• 2、promise
• 3、事件监听/订阅
• 4、rxjs

二、使用promise和rxjs实现异步编程的对比

• 1、使用promise异步编程的写法

    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('promise成功了');
      }, 1000);
    });

    promise.then(data => {
      console.log(data);
    });

• 2、使用rxjs异步流编程的写法

    import { Observable } from 'rxjs';
    const stream = new Observable(observer => {
      setTimeout(() => {
        observer.next('rxjs成功了');
      });
    });
    stream.subscribe(data => {
      console.log(data);
    });

二、rxjs可以取消订阅,但是promise却不可以

• 1、具体实现代码

    import { Observable } from 'rxjs';

    const stream = new Observable(observer => {
      setTimeout(() => {
        observer.next('请求成功');
      }, 2000);
    });

    const disposable = stream.subscribe(data => {
      console.log(data);
    });

    setTimeout(() => {
      disposable.unsubscribe(); // 取消订阅
    }, 1000);

三、异步多次执行

对于promise的执行是一个状态到另外一个状态后是不可变的,结果要不是resole就是reject,但是不能回退

• 1、在promise中的定时器【只执行一次】

    const promise = new Promise((resolve, reject) => {
      setInterval(() => {
        resolve('promise成功了');
      }, 1000);
    });

    promise.then(data => {
      console.log(data);
    });

• 2、使用rxjs多次执行

    import { Observable } from 'rxjs';

    const stream = new Observable(observer => {
      let count: number = 0;
      setInterval(() => {
        observer.next(count++);
      }, 1000);
    });

    const disposable = stream.subscribe(data => {
      console.log(data);
    });

四、常见的操作符

• 1、使用方式

    import { Observable } from 'rxjs';
    import { map, filter } from 'rxjs/operators';

    const stream =
      new Observable() <
      number >
      (observer => {
        let count = 0;
        setInterval(() => {
          observer.next(count++);
        }, 1000);
      });

    stream
      .pipe(
        filter((x: number) => x % 2 === 0),
        map((x: number) => x * 2)
      )
      .subscribe(data => {
        console.log(data);
      });

• 2、常见的操作符见官网地址
  • Creation Operators创建异步流的操作符号
  • Join Creation Operators连接创建
  • Transformation Operators数据转换的
  • Filtering Operators过滤数据
  • Join Operators连接的操作符
  • Multicasting Operators
  • Error Handling Operators
  • Utility Operators
  • Conditional and Boolean Operators
  • Mathematical and Aggregate Operators
• 3、比如限制点击评率的过滤管道

    import { fromEvent } from 'rxjs';
    import { throttleTime } from 'rxjs/operators';

    const clicks = fromEvent(document, 'click');
    // 限制1000ms内不能重复点击
    const result = clicks.pipe(throttleTime(1000));
    result.subscribe(x => console.log(x));