Question

zip

函数签名: zip(observables: *): Observable

描述

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

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

---

与 interval 或 timer 进行组合, zip 可以用来根据另一个 observable 进行定时输出！

---

示例

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

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { delay } from 'rxjs/operators';
import { of, zip } from 'rxjs';

const sourceOne = of('Hello');
const sourceTwo = of('World!');
const sourceThree = of('Goodbye');
const sourceFour = of('World!');
// 一直等到所有 observables 都发出一个值，才将所有值作为数组发出
const example = zip(
  sourceOne,
  sourceTwo.pipe(delay(1000)),
  sourceThree.pipe(delay(2000)),
  sourceFour.pipe(delay(3000))
);
// 输出: ["Hello", "World!", "Goodbye", "World!"]
const subscribe = example.subscribe(val => console.log(val));

示例 2: 当一个 observable 完成时进行 zip

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { take } from 'rxjs/operators';
import { interval, zip } from 'rxjs';

// 每1秒发出值
const source = interval(1000);
// 当一个 observable 完成时，便不会再发出更多的值了
const example = zip(source, source.pipe(take(2)));
// 输出: [0,0]...[1,1]
const subscribe = example.subscribe(val => console.log(val));

其他资源

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

---

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