非同期プログラミング：習得へのrxjsエントリ

1つは、一般的な非同期プログラミングです。

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

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

3つの非同期複数実行

promiseある状態を別の状態に実装する場合、結果の後で不変ですresoleがreject、その場合は、ロールバックできません。

• 1. promise[1回だけ実行]のタイマー

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

4つの一般的な演算子

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