• zip
    • 签名: zip(observables: *): Observable
  • 描述
    • TL;DR: 在所有 observables 发出后,将它们的值作为数组发出
  • 示例
    • 示例 1: 以交替的时间间隔对多个 observables 进行 zip
    • 示例 2: 当一个 observable 完成时进行 zip
  • 其他资源

    zip

    签名: zip(observables: *): Observable

    描述

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

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


    :bulb: 与 interval 或 timer 进行组合, 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));

    其他资源

    • zip :newspaper: - 官方文档
    • 组合操作符: zip :video_camera: :dollar: - André Staltz

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