zip

签名: zip(observables: *): Observable

描述

TL;DR: 在所有 observables 发出后,将它们的值作为数组发出

zip 操作符会订阅所有内部 observables,然后等待每个发出一个值。一旦发生这种情况,将发出具有相应索引的所有值。这会持续进行,直到至少一个内部
observable 完成。


:bulb:intervaltimer 进行组合, zip 可以用来根据另一个 observable 进行定时输出!


zip - 图2

示例

示例 1: 以交替的时间间隔对多个 observables 进行 zip

( StackBlitz |
jsBin |
jsFiddle )

  1. import { delay } from 'rxjs/operators';
  2. import { of } from 'rxjs/observable/of';
  3. import { zip } from 'rxjs/observable/zip';
  4. const sourceOne = of('Hello');
  5. const sourceTwo = of('World!');
  6. const sourceThree = of('Goodbye');
  7. const sourceFour = of('World!');
  8. // 一直等到所有 observables 都发出一个值,才将所有值作为数组发出
  9. const example = zip(
  10. sourceOne,
  11. sourceTwo.pipe(delay(1000)),
  12. sourceThree.pipe(delay(2000)),
  13. sourceFour.pipe(delay(3000))
  14. );
  15. // 输出: ["Hello", "World!", "Goodbye", "World!"]
  16. const subscribe = example.subscribe(val => console.log(val));
示例 2: 当一个 observable 完成时进行 zip

( StackBlitz |
jsBin |
jsFiddle )

  1. import { take } from 'rxjs/operators';
  2. import { interval } from 'rxjs/observable/interval';
  3. import { zip } from 'rxjs/observable/zip';
  4. // 每1秒发出值
  5. const source = interval(1000);
  6. // 当一个 observable 完成时,便不会再发出更多的值了
  7. const example = zip(source, source.pipe(take(2)));
  8. // 输出: [0,0]...[1,1]
  9. const subscribe = example.subscribe(val => console.log(val));

其他资源


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