1. javascript解決非同步程式設計方案

解決javascript非同步程式設計方案有兩種，一種是promise物件形式，還有一種是是Rxjs庫形式，Rxjs相對於Promise來說，有好多Promise沒有的特性和功能，使用起來更便捷簡單；

2. Rxjs 簡單介紹

Rxjs 是Reactive Extensions JavaScript 的簡寫，響應式非同步程式設計；同Promise物件一樣，是解決JS非同步程式設計的一種解決方案；

3. Rxjs使用

1. Rxjs是一個庫，需要使用npm進行安裝；

    // 安裝rxjs

    npm install rxjs --save

    // 安裝rxjs-compat, rxjs-compat軟體包在v5和v6之間建立了一個api相容層

    npm install rxjs-compat --save
 

2. Rxjs常用操作符

2-1. 建立操作符: fromEvent、 from、 of、 interval、 create

(1). fromEvent: 建立一個 Observable，該 Observable 發出來自給定事件物件的指定型別事件

// 獲取html元素
const btnElem = document.querySelector('button#rxjsBtn');
// 建立按鈕的點選事件為可觀察物件
Rx.Observable.fromEvent(btnElem, 'click') 
.scan(count => count + 1, 0) // count為定義的變數；逗號後面的0為count的初始值；箭頭後面的語句值為scan返回的值；
.subscribe((count) => {
    console.log('fromEvent' + count);
});


/// 第一次點選輸出: fromEvent1；第二次點選輸出fromEvent2;依次同理
 

(2). from: 將各種其他物件和資料型別轉化為 Observables

const arrayData = [5, 6];
Observable.from(arrayData).pipe(
    scan((scanData, item) => scanData += item, 10),
    map((item) => item * 2),
).subscribe((data: any) => {
    console.log('from:' + data);

});


/// 瀏覽器輸出 from:30 from:42

(3). of: 建立一個 Observable，它會依次發出由你提供的引數，最後發出完成通知。

Observable.of('value1', 'value2')
.subscribe((data: any) => {
    console.log('of：' + data);
});


/// 瀏覽器輸出 of：value1 of: value2

(4). interval: 返回一個無線自增的序列整數

const numbers = Rx.Observable.interval(1000);
numbers.subscribe(x => console.log('interval:'+x));


/// 瀏覽器輸出: interval:1 interval2 依次增加

(5). create: 建立Observable物件, 當觀察者( Observer )訂閱該 Observable 時，它會執行指定的函式

const obs = Observable.create((obsever) => {
      obsever.next('add');
      obsever.next('upt');
      obsever.complete(); // 代表完成，之後的語句將不再會被呼叫;;;
      obsever.next('del');
    });
    // 訂閱觀察者
    obs.map(data => data + 'Map').subscribe((data: any) => {
      console.log(data);
    });
    /// 瀏覽器輸出: addMap uptMap

2-2. 轉換操作符 : Map、MergeMap、MapTo、Scan

(1). Map: 把每個源值傳遞給轉化函式以獲得相應的輸出值

Rx.Observable.from([1, 2])
.map((item) => item * 2)
.subscribe((data: any) => { console.log('map:' + data);});


/// 瀏覽器輸出: map: 2 map: 4

(2). MergeMap: 將每個源值投射成 Observable ，該 Observable 會合併到輸出 Observable 中;;;;可用於串聯請求

const mergeA = Observable.of(1, 2, 3);
const mergeB = mergeA.map(r => Observable.of(r)).mergeMap(r => r);
mergeB.subscribe(c => console.log('mergeMap:' + c));


/// 瀏覽器輸出: mergeMap1 mergeMap2 mergeMap3

(3). MapTo: 類似於 map，但它每一次都把源值對映成同一個輸出值。

Observable.of(1, 2, 3).mapTo(33).subscribe(data => {console.log(data);});


/// 瀏覽器輸出: 3個55

(4). Scan: 對源 Observable 使用累加器函式， 返回生成的中間值， 可選的初始值

Rx.Observable.from([1, 2]).pipe(
  scan((acc, item) => acc += item, 10)) // acc為一個新變數，item為[1,2]中的每一項， 10為新變數acc的預設初始值；返回新生成的中間值acc reduce同理
  .subscribe(v => console.log(v))


///  瀏覽器輸出 11  13

2-3. 數學和聚合操作符：reduce

(1). reduce: 和scan同理；只不過中間變數的值不會清0，會保留上一次源操作之後的得到的中間值；並且只會輸出最後一個值；

Rx.Observable.from([1, 2]).pipe(
  reduce((acc, item) => acc += item, 10))
  .subscribe(v => console.log(v))

// 輸出

13

2-4. 過濾操作符: filter、throttleTime

(1). filter: 資料進行過濾返回你想要的資料

import {Observable} from 'rxjs';
import {filter} from 'rxjs/internal/operators';

 

from([2, 3, 4]).pipe(
    filter(item => item <= 3))
    .subscribe(v => console.log(v))

// 瀏覽器輸出: 2 3

(2). throttleTime: 在一定時間範圍內不管產生了多少事件，它只放第一個過去，剩下的都將捨棄

實現: 一秒內不管有多少點選事件；只觸發一次點選事件;，

const throttleElem = document.querySelector('#throttleElem');
    // 一秒內只觸發一次點選事件
    Rx.Observable.fromEvent(throttleElem, 'click')
      .throttleTime(1000)
      .scan(count => count + 1, 0)
      .subscribe(data => {
        console.log('點選了' + data + '次');
      });