Asynchronous programming: rxjs entry to mastery

One, common asynchronous programming are

• 1. Callback function
• 2、promise
• 3. Event monitoring/publish and subscribe
• 4、rxjs

Second, the comparison of using promiseand rxjsimplementing asynchronous programming

• 1. Use promiseasynchronous programming

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

• 2. Use rxjsasynchronous flow programming

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

2. rxjsYou can cancel the subscription, but promisenot

• 1. Specific implementation code

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

Three, asynchronous multiple execution

For promisethe implementation of a state to another state it is immutable after the results but for resolethat reject, but can not be rolled back

• 1. promiseThe timer in [execute only once]

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

• 2. Use rxjsmultiple executions

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

Four, common operators

• 1. How to use

  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. See the official website address for common operators

  • Creation OperatorsOperation symbol for creating asynchronous flow
  • Join Creation OperatorsConnection creation
  • Transformation OperatorsData conversion
  • Filtering OperatorsFilter data
  • Join OperatorsConcatenated operator
  • Multicasting Operators
  • Error Handling Operators
  • Utility Operators
  • Conditional and Boolean Operators
  • Mathematical and Aggregate Operators

• 3. For example, filter channels that limit the click rate

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