RxJS之組合操作符 ( Angular環境 )

一 merge操作符

把多個 Observables 的值混合到一個 Observable 中

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { range } from 'rxjs/observable/range';
import { merge } from 'rxjs/observable/merge';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const low: Observable<number> = range(100, 3);
    const middle: Observable<number> = range(200, 3);
    const high: Observable<number> = range(300, 3);
    merge(low, middle, high).subscribe((val: number) => {
      console.log(val);
    });
  }

}

合並是沒有順序的：先到達的值在合並后的Observable中先輸出。

import { Component, OnInit } from '@angular/core';
import { merge } from 'rxjs/observable/merge';
import { interval } from 'rxjs/observable/interval';
import { map } from 'rxjs/operators/map';
import { delay } from 'rxjs/operators/delay';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    let count = 0;
    const subscription = merge(
      interval(30).pipe(map(val => val + 300)),
      interval(40).pipe(map(val => val + 400)),
      interval(50).pipe(map(val => val + 500))
    ).pipe(delay(3000)) // 合並后的Observable，延遲3秒再開始的輸出
      .subscribe(
        val => {
          count++;
          console.log(val);
          if (count >= 10) { // 只輸出10個數
            subscription.unsubscribe();
          }
        }
      );
  }

}

 二 forkJoin操作符

forkJoin will wait for all passed Observables to complete and then it will emit an array with last values from corresponding Observables.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    forkJoin(
      of(1, 3, 5, 7),
      of(2, 4, 6, 8)
    ).subscribe(
      (arr: number[]) => {
        console.log(`next: ${arr[0]}, ${arr[1]}`);
      },
      null,
      () => {
        console.log('complete.');
      }
    );
  }

}

處理並行的多個ajax請求 ( safari停止跨域限制 )

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor(public http: HttpClient) { }

  ngOnInit() {
    forkJoin(
      this.http.get('https://www.baidu.com', { responseType: 'text' }),
      this.http.get('https://www.sogou.com', { responseType: 'text' })
    ).subscribe(
      (arr: any[]) => {
        const baidu = arr[0].substring(arr[0].indexOf('<title>') + 7, arr[0].indexOf('</title>'));
        const sogou = arr[1].substring(arr[1].indexOf('<title>') + 7, arr[1].indexOf('</title>'));
        console.log(baidu);
        console.log(sogou);
      }
    );
  }
}

三 startWith操作符

返回的 Observable 會先發出作為參數指定的項，然后再發出由源 Observable 所發出的項。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs/observable/of';
import { startWith } from 'rxjs/operators/startWith';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
    of('Mikey', 'Don').pipe(
      startWith('Leo', 'Raph')
    ).subscribe(
      (val: string) => {
        console.log(val);
      }
    );
  }
}