concat

签名: concat(observables: ...*): Observable

按照顺序,前一个 observable 完成了再订阅下一个 observable 并发出值。


:bulb: 你可以把 concat 想象成 ATM 机前的长队,下一次交易 (subscription) 不能在前一个交易完成前开始!

:bulb: 此操作符可以既有静态方法,又有实例方法!

:bulb: 如果生产量是首要考虑的,而不需要关心产生值的顺序,那么试试用 merge 来代替!


concat - 图4

示例

( 示例测试 )

示例 1: concat 2个基础的 observables

( StackBlitz |
jsBin |
jsFiddle )

  1. import { concat } from 'rxjs/operators';
  2. import { of } from 'rxjs/observable/of';
  3. // 发出 1,2,3
  4. const sourceOne = of(1, 2, 3);
  5. // 发出 4,5,6
  6. const sourceTwo = of(4, 5, 6);
  7. // 先发出 sourceOne 的值,当完成时订阅 sourceTwo
  8. const example = sourceOne.pipe(concat(sourceTwo));
  9. // 输出: 1,2,3,4,5,6
  10. const subscribe = example.subscribe(val =>
  11. console.log('Example: Basic concat:', val)
  12. );
示例 2: concat 作为静态方法

( StackBlitz |
jsBin |
jsFiddle )

  1. import { of } from 'rxjs/observable/of';
  2. import { concat } from 'rxjs/observable/concat';
  3. // 发出 1,2,3
  4. const sourceOne = of(1, 2, 3);
  5. // 发出 4,5,6
  6. const sourceTwo = of(4, 5, 6);
  7. // 作为静态方法使用
  8. const example = concat(sourceOne, sourceTwo);
  9. // 输出: 1,2,3,4,5,6
  10. const subscribe = example.subscribe(val => console.log(val));
示例 3: 使用延迟的 souce observable 进行 concat

( StackBlitz |
jsBin |
jsFiddle )

  1. import { delay, concat } from 'rxjs/operators';
  2. import { of } from 'rxjs/observable/of';
  3. // 发出 1,2,3
  4. const sourceOne = of(1, 2, 3);
  5. // 发出 4,5,6
  6. const sourceTwo = of(4, 5, 6);
  7. // 延迟3秒,然后发出
  8. const sourceThree = sourceOne.pipe(delay(3000));
  9. // sourceTwo 要等待 sourceOne 完成才能订阅
  10. const example = sourceThree.pipe(concat(sourceTwo));
  11. // 输出: 1,2,3,4,5,6
  12. const subscribe = example.subscribe(val =>
  13. console.log('Example: Delayed source one:', val)
  14. );
示例 4: 使用不完成的 source observable 进行 concat

( StackBlitz |
jsBin |
jsFiddle )

  1. import { interval } from 'rxjs/observable/interval';
  2. import { of } from 'rxjs/observable/of';
  3. import { concat } from 'rxjs/observable/concat';
  4. // 当 source 永远不完成时,随后的 observables 永远不会运行
  5. const source = concat(interval(1000), of('This', 'Never', 'Runs'));
  6. // 输出: 0,1,2,3,4....
  7. const subscribe = source.subscribe(val =>
  8. console.log(
  9. 'Example: Source never completes, second observable never runs:',
  10. val
  11. )
  12. // 输出: 0,1,2,3,4....
  13. const subscribe = source.subscribe(val => console.log('Example: Source never completes, second observable never runs:', val));

其他资源


:file_folder: 源码: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts