) => {
75 | return attempts.pipe(
76 | mergeMap((error, i) => {
77 | const retryAttempt = i + 1;
78 | // 如果达到最大重试次数或响应的状态码
79 | // 不是我们想重试的，就抛出错误
80 | if (
81 | retryAttempt > maxRetryAttempts ||
82 | excludedStatusCodes.find(e => e === error.status)
83 | ) {
84 | return _throw(error);
85 | }
86 | console.log(
87 | `Attempt ${retryAttempt}: retrying in ${retryAttempt *
88 | scalingDuration}ms`
89 | );
90 | // 重试的时间间隔不断增长: 1秒、2秒，以此类推
91 | return timer(retryAttempt * scalingDuration);
92 | }),
93 | finalize(() => console.log('We are done!'))
94 | );
95 | };
96 | ```
97 |
98 | ```js
99 | import { Component, OnInit } from '@angular/core';
100 | import { catchError, retryWhen } from 'rxjs/operators';
101 | import { of } from 'rxjs';
102 | import { genericRetryStrategy } from './rxjs-utils';
103 | import { AppService } from './app.service';
104 |
105 | @Component({
106 | selector: 'my-app',
107 | templateUrl: './app.component.html',
108 | styleUrls: [ './app.component.css' ]
109 | })
110 | export class AppComponent implements OnInit {
111 | constructor(private _appService: AppService) {}
112 |
113 | ngOnInit() {
114 | this._appService
115 | .getData(500)
116 | .pipe(
117 | retryWhen(genericRetryStrategy()),
118 | catchError(error => of(error))
119 | )
120 | .subscribe(console.log);
121 |
122 | // 排除状态码，增加延迟以保持日志清晰
123 | setTimeout(() => {
124 | this._appService
125 | .getData(500)
126 | .pipe(
127 | retryWhen(genericRetryStrategy({
128 | scalingDuration: 2000,
129 | excludedStatusCodes: [500]
130 | })),
131 | catchError(error => of(error))
132 | )
133 | .subscribe(e => console.log('Exluded code:', e.status));
134 |
135 | }, 8000);
136 | }
137 | }
138 | ```
139 |
140 | ### 其他资源
141 |
142 | - [retryWhen](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-retryWhen) :newspaper: - 官方文档
143 | - [错误处理操作符: retry 和 retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
144 |
145 | ---
146 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/retryWhen.ts)
147 |
--------------------------------------------------------------------------------
/operators/filtering/README.md:
--------------------------------------------------------------------------------
1 | # 过滤操作符
2 |
3 | 在[基于推送的方式](http://reactivex.io/rxjs/manual/overview.html#pull-versus-push)下，选择接受项的方式和时间很重要。这些操作符提供了从 observable 源中接受值和处理[backpressure (背压)](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/backpressure.md)的技术。
4 |
5 | ## 内容
6 |
7 | * [audit](audit.md)
8 | * [auditTime](audittime.md)
9 | * [debounce](debounce.md)
10 | * [debounceTime](debouncetime.md) :star:
11 | * [distinctUntilChanged](distinctuntilchanged.md) :star:
12 | * [filter](filter.md) :star:
13 | * [first](first.md)
14 | * [ignoreElements](ignoreelements.md)
15 | * [last](last.md)
16 | * [sample](sample.md)
17 | * [single](single.md)
18 | * [skip](skip.md)
19 | * [skipUntil](skipuntil.md)
20 | * [skipWhile](skipwhile.md)
21 | * [take](take.md) :star:
22 | * [takeUntil](takeuntil.md) :star:
23 | * [takeWhile](takewhile.md)
24 | * [throttle](throttle.md)
25 | * [throttleTime](throttletime.md)
26 |
27 | :star: - *常用*
28 |
29 |
--------------------------------------------------------------------------------
/operators/filtering/audit.md:
--------------------------------------------------------------------------------
1 | # audit
2 |
3 | #### 函数签名: `audit(durationSelector: (value) => Observable | Promise): Observable`
4 |
5 | ## 根据提供的 Observable 来忽略某段时间内发出的数据，时间到后发出最新值
6 |
7 | ### [ 示例尽请期待！ ]
8 |
9 | ### 其他资源
10 |
11 | * [audit](http://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-audit)
12 | :newspaper: - 官方文档
13 |
14 | ---
15 |
16 | > :file_folder: 源码:
17 | > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/audit.ts)
18 |
--------------------------------------------------------------------------------
/operators/filtering/audittime.md:
--------------------------------------------------------------------------------
1 | # auditTime
2 |
3 | #### 函数签名: `audit(duration: number, scheduler?: Scheduler): Observable`
4 |
5 | ## 在给定的时间内忽略发出的数据，时间到后发出最新值
6 |
7 | ### [ 示例尽请期待！ ]
8 |
9 | ### 其他资源
10 |
11 | - [auditTime](http://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-auditTime)
12 | :newspaper: - 官方文档
13 |
14 | ---
15 |
16 | > :file_folder: 源码:
17 | > [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/auditTime.ts)
18 |
--------------------------------------------------------------------------------
/operators/filtering/debounce.md:
--------------------------------------------------------------------------------
1 | # debounce
2 |
3 | #### 函数签名: `debounce(durationSelector: function): Observable`
4 |
5 | ## 根据一个选择器函数，舍弃掉在两次输出之间小于指定时间的发出值。
6 |
7 | ---
8 |
9 | :bulb: 尽管没有 [debounceTime](debouncetime.md) 使用广泛，但当 debounce 的频率是变量时, **debounce** 是很重要的！
10 |
11 | ---
12 |
13 | ### 示例
14 |
15 | ##### 示例 1: 基于 timer 的 debounce
16 |
17 | ( [StackBlitz](https://stackblitz.com/edit/typescript-dzjbra?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sorimeyoro/1/edit?js,console) |
18 | [jsFiddle](https://jsfiddle.net/btroncone/e5698yow/) )
19 |
20 | ```js
21 | // RxJS v6+
22 | import { of, timer } from 'rxjs';
23 | import { debounce } from 'rxjs/operators';
24 |
25 | // 发出四个字符串
26 | const example = of('WAIT', 'ONE', 'SECOND', 'Last will display');
27 | /*
28 | 只有在最后一次发送后再经过一秒钟，才会发出值，并抛弃在此之前的所有其他值
29 | */
30 | const debouncedExample = example.pipe(debounce(() => timer(1000)));
31 | /*
32 | 在这个示例中，所有的值都将被忽略，除了最后一个
33 | 输出: 'Last will display'
34 | */
35 | const subscribe = debouncedExample.subscribe(val => console.log(val));
36 | ```
37 |
38 | ##### 示例 2: 基于 interval 的 dobounce
39 |
40 | ( [StackBlitz](https://stackblitz.com/edit/typescript-qnfidr?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sotaretese/1/edit?js,console) |
41 | [jsFiddle](https://jsfiddle.net/btroncone/6ab34nq6/) )
42 |
43 | ```js
44 | // RxJS v6+
45 | import { interval, timer } from 'rxjs';
46 | import { debounce } from 'rxjs/operators';
47 |
48 | // 每1秒发出值, 示例: 0...1...2
49 | const interval$ = interval(1000);
50 | // 每1秒都将 debounce 的时间增加200毫秒
51 | const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
52 | /*
53 | 5秒后，debounce 的时间会大于 interval 的时间，之后所有的值都将被丢弃
54 | 输出: 0...1...2...3...4......(debounce 的时间大于1秒后则不再发出值)
55 | */
56 | const subscribe = debouncedInterval.subscribe(val =>
57 | console.log(`Example Two: ${val}`)
58 | );
59 | ```
60 |
61 | ### 其他资源
62 |
63 | - [debounce](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-debounce) :newspaper: - 官方文档
64 | - [转换操作符: debounce 和 debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
65 |
66 | ---
67 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounce.ts)
68 |
--------------------------------------------------------------------------------
/operators/filtering/debouncetime.md:
--------------------------------------------------------------------------------
1 | # debounceTime
2 |
3 | #### 函数签名: `debounceTime(dueTime: number, scheduler: Scheduler): Observable`
4 |
5 | ## 舍弃掉在两次输出之间小于指定时间的发出值
6 |
7 | ---
8 |
9 | :bulb: 此操作符在诸如预先知道用户的输入频率的场景下很受欢迎！
10 |
11 | ---
12 |
13 | ### 示例
14 |
15 | ##### 示例 1: 基于输入间隔时间的 debounce
16 |
17 | ( [StackBlitz](https://stackblitz.com/edit/typescript-adheqt?file=index.ts&devtoolsheight=50) | [jsBin](http://jsbin.com/kacijarogi/1/edit?js,console,output) |
18 | [jsFiddle](https://jsfiddle.net/btroncone/7kbg4q2e/) )
19 |
20 | ```js
21 | // RxJS v6+
22 | import { fromEvent, timer } from 'rxjs';
23 | import { debounceTime, map } from 'rxjs/operators';
24 |
25 | const input = document.getElementById('example');
26 |
27 | // 对于每次键盘敲击，都将映射成当前输入值
28 | const example = fromEvent(input, 'keyup').pipe(map(i => i.currentTarget.value));
29 |
30 | // 在两次键盘敲击之间等待0.5秒方才发出当前值，
31 | // 并丢弃这0.5秒内的所有其他值
32 | const debouncedInput = example.pipe(debounceTime(500));
33 |
34 | // 输出值
35 | const subscribe = debouncedInput.subscribe(val => {
36 | console.log(`Debounced Input: ${val}`);
37 | });
38 | ```
39 |
40 | ### 其他资源
41 |
42 | * [debounceTime](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-debounceTime) :newspaper: - 官方文档
43 | * [转换操作符: debounce 和 debounceTime](https://egghead.io/lessons/rxjs-transformation-operators-debounce-and-debouncetime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
44 |
45 | ---
46 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts)
47 |
--------------------------------------------------------------------------------
/operators/filtering/distinctuntilchanged.md:
--------------------------------------------------------------------------------
1 | # distinctUntilChanged
2 |
3 | #### 函数签名: ` distinctUntilChanged(compare: function): Observable`
4 |
5 | ## 只有当当前值与之前最后一个值不同时才将其发出。
6 |
7 | ---
8 |
9 | :bulb: distinctUntilChanged 默认使用 `===` 进行比较, 对象引用必须匹配！
10 |
11 | ---
12 |
13 | ### 示例
14 |
15 | ##### 示例 1: 使用基础值进行 distinctUntilChanged
16 |
17 | ( [StackBlitz](https://stackblitz.com/edit/typescript-bsb8mw?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) |
18 | [jsFiddle](https://jsfiddle.net/btroncone/xc2vzct7/) )
19 |
20 | ```js
21 | // RxJS v6+
22 | import { from } from 'rxjs';
23 | import { distinctUntilChanged } from 'rxjs/operators';
24 |
25 | // 基于最新发出的值进行比较，只输出不同的值
26 | const myArrayWithDuplicatesInARow = from([1, 1, 2, 2, 3, 1, 2, 3]);
27 |
28 | const distinctSub = myArrayWithDuplicatesInARow
29 | .pipe(distinctUntilChanged())
30 | // 输出: 1,2,3,1,2,3
31 | .subscribe(val => console.log('DISTINCT SUB:', val));
32 |
33 | const nonDistinctSub = myArrayWithDuplicatesInARow
34 | // 输出 : 1,1,2,2,3,1,2,3
35 | .subscribe(val => console.log('NON DISTINCT SUB:', val));
36 | ```
37 |
38 | ##### 示例 2: 使用对象进行 distinctUntilChanged
39 |
40 | ( [StackBlitz](https://stackblitz.com/edit/typescript-moe7mh?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) |
41 | [jsFiddle](https://jsfiddle.net/btroncone/t4ava5b4/) )
42 |
43 | ```js
44 | // RxJS v6+
45 | import { from } from 'rxjs';
46 | import { distinctUntilChanged } from 'rxjs/operators';
47 |
48 | const sampleObject = { name: 'Test' };
49 | // 对象必须有相同的引用
50 | const myArrayWithDuplicateObjects = from([
51 | sampleObject,
52 | sampleObject,
53 | sampleObject
54 | ]);
55 | // 基于最新发出的值进行比较，只输出不同的对象
56 | const nonDistinctObjects = myArrayWithDuplicateObjects
57 | .pipe(distinctUntilChanged())
58 | // 输出: 'DISTINCT OBJECTS: {name: 'Test'}
59 | .subscribe(val => console.log('DISTINCT OBJECTS:', val));
60 | ```
61 |
62 | ### 其他资源
63 |
64 | * [distinctUntilChanged](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged) :newspaper: - 官方文档
65 | * [过滤操作符: distinct 和 distinctUntilChanged](https://egghead.io/lessons/rxjs-filtering-operators-distinct-and-distinctuntilchanged?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
66 |
67 | ---
68 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/distinctUntilChanged.ts)
69 |
--------------------------------------------------------------------------------
/operators/filtering/filter.md:
--------------------------------------------------------------------------------
1 | # filter
2 |
3 | #### 函数签名: `filter(select: Function, thisArg: any): Observable`
4 |
5 | ## 发出符合给定条件的值。
6 |
7 | ---
8 |
9 | :bulb: 如果你希望当不满足条件时完成 observable 的话，请查阅 [takeWhile](takewhile.md)！
10 |
11 | ---
12 |
13 | ### 示例
14 |
15 | ##### 示例 1: 过滤出偶数
16 |
17 | ( [StackBlitz](https://stackblitz.com/edit/typescript-4g4cys?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/vafogoluye/1/edit?js,console) |
18 | [jsFiddle](https://jsfiddle.net/btroncone/tkz0fuy2/) )
19 |
20 | ```js
21 | // RxJS v6+
22 | import { from } from 'rxjs';
23 | import { filter } from 'rxjs/operators';
24 |
25 | // 发出 (1,2,3,4,5)
26 | const source = from([1, 2, 3, 4, 5]);
27 | // 过滤掉奇数
28 | const example = source.pipe(filter(num => num % 2 === 0));
29 | // 输出: "Even number: 2", "Even number: 4"
30 | const subscribe = example.subscribe(val => console.log(`Even number: ${val}`));
31 | ```
32 |
33 | ##### 示例 2: 基于属性过滤对象
34 |
35 | ( [StackBlitz](https://stackblitz.com/edit/typescript-n73fsn?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qihagaxuso/1/edit?js,console) |
36 | [jsFiddle](https://jsfiddle.net/btroncone/yjdsoug1/) )
37 |
38 | ```js
39 | // RxJS v6+
40 | import { from } from 'rxjs';
41 | import { filter } from 'rxjs/operators';
42 |
43 | // 发出 ({name: 'Joe', age: 31}, {name: 'Bob', age:25})
44 | const source = from([{ name: 'Joe', age: 31 }, { name: 'Bob', age: 25 }]);
45 | // 过滤掉年龄小于30岁的人
46 | const example = source.pipe(filter(person => person.age >= 30));
47 | // 输出: "Over 30: Joe"
48 | const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`));
49 | ```
50 |
51 | ##### 示例 3: 过滤出大于给定值的数字
52 |
53 | ( [StackBlitz](https://stackblitz.com/edit/typescript-eyvvfu?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/rakabaheyu/1/edit?js,console) |
54 | [jsFiddle](https://jsfiddle.net/btroncone/g1tgreha/) )
55 |
56 | ```js
57 | // RxJS v6+
58 | import { interval } from 'rxjs';
59 | import { filter } from 'rxjs/operators';
60 |
61 | // 每1秒发出值
62 | const source = interval(1000);
63 | // 过滤掉所有值知道 interval 发出的值大于5
64 | const example = source.pipe(filter(num => num > 5));
65 | /*
66 | "Number greater than 5: 6"
67 | "Number greater than 5: 7"
68 | "Number greater than 5: 8"
69 | "Number greater than 5: 9"
70 | */
71 | const subscribe = example.subscribe(val =>
72 | console.log(`Number greater than 5: ${val}`)
73 | );
74 | ```
75 |
76 | ### 相关食谱
77 |
78 | * [HTTP 轮询](../../recipes/http-polling.md)
79 | * [游戏循环](../../recipes/gameloop.md)
80 |
81 | ### 其他资源
82 |
83 | * [filter](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-filter) :newspaper: - 官方文档
84 | * [使用 filter 添加条件逻辑](https://egghead.io/lessons/rxjs-adding-conditional-logic-with-filter?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist
85 | * [过滤操作符: filter](https://egghead.io/lessons/rxjs-filtering-operator-filter?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
86 |
87 | ---
88 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/filter.ts)
89 |
--------------------------------------------------------------------------------
/operators/filtering/first.md:
--------------------------------------------------------------------------------
1 | # first
2 |
3 | #### 函数签名: `first(predicate: function, select: function)`
4 |
5 | ## 发出第一个值或第一个通过给定表达式的值。
6 |
7 | ---
8 |
9 | :bulb: 与 first 对应的操作符是 [**last**](last.md)！
10 |
11 | ---
12 |
13 |
14 |
15 | ### 示例
16 |
17 | (
18 | [example tests](https://github.com/btroncone/learn-rxjs/blob/master/operators/specs/filtering/first-spec.ts)
19 | )
20 |
21 | ##### 示例 1: 序列中的第一个值
22 |
23 | (
24 | [StackBlitz](https://stackblitz.com/edit/typescript-t8hseq?file=index.ts&devtoolsheight=100)
25 | | [jsBin](http://jsbin.com/kayenuxoma/1/edit?js,console) |
26 | [jsFiddle](https://jsfiddle.net/btroncone/uncey4v9/) )
27 |
28 | ```js
29 | // RxJS v6+
30 | import { from } from 'rxjs';
31 | import { first } from 'rxjs/operators';
32 |
33 | const source = from([1, 2, 3, 4, 5]);
34 | // 没有参数则发出第一个值
35 | const example = source.pipe(first());
36 | // 输出: "First value: 1"
37 | const subscribe = example.subscribe(val => console.log(`First value: ${val}`));
38 | ```
39 |
40 | ##### 示例 2: 第一个通过 predicate 函数的值
41 |
42 | (
43 | [StackBlitz](https://stackblitz.com/edit/typescript-bw5byu?file=index.ts&devtoolsheight=100)
44 | | [jsBin](http://jsbin.com/pujowawovu/1/edit?js,console) |
45 | [jsFiddle](https://jsfiddle.net/btroncone/pt36r8cu/) )
46 |
47 | ```js
48 | // RxJS v6+
49 | import { from } from 'rxjs';
50 | import { first } from 'rxjs/operators';
51 |
52 | const source = from([1, 2, 3, 4, 5]);
53 | // 发出通过测试的第一项
54 | const example = source.pipe(first(num => num === 5));
55 | // 输出: "First to pass test: 5"
56 | const subscribe = example.subscribe(val =>
57 | console.log(`First to pass test: ${val}`)
58 | );
59 | ```
60 |
61 | ##### 示例 3: 使用可选的 projection 函数
62 |
63 | (
64 | [StackBlitz](https://stackblitz.com/edit/typescript-2pkzpv?file=index.ts&devtoolsheight=100)
65 | | [jsBin](http://jsbin.com/qoganeleqa/1/edit?js,console) |
66 | [jsFiddle](https://jsfiddle.net/btroncone/owx2jdg1/3/) )
67 |
68 | ```js
69 | // RxJS v6+
70 | import { from } from 'rxjs';
71 | import { first } from 'rxjs/operators';
72 |
73 | const source = from([1, 2, 3, 4, 5]);
74 | // 没有值通过的话则发出默认值
75 | const example = source.pipe(first(val => val > 5, 'Nothing'));
76 | // 输出: 'Nothing'
77 | const subscribe = example.subscribe(val => console.log(val));
78 | ```
79 |
80 | ### 其他资源
81 |
82 | - [first](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-first) :newspaper: - 官方文档
83 | - [过滤操作符: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
84 |
85 | ---
86 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/first.ts)
87 |
--------------------------------------------------------------------------------
/operators/filtering/ignoreelements.md:
--------------------------------------------------------------------------------
1 | # ignoreElements
2 |
3 | #### 函数签名: `ignoreElements(): Observable`
4 |
5 | ## 忽略所有通知，除了 complete 和 error 。
6 |
7 |
8 |
9 | ### 示例
10 |
11 | ##### 示例 1: 忽略源 observable 的所有数据项
12 |
13 | (
14 | [StackBlitz](https://stackblitz.com/edit/typescript-jpjcpg?file=index.ts&devtoolsheight=100)
15 | | [jsBin](http://jsbin.com/yiyefelubi/1/edit?js,console) |
16 | [jsFiddle](https://jsfiddle.net/btroncone/59scjqss/) )
17 |
18 | ```js
19 | // RxJS v6+
20 | import { interval } from 'rxjs';
21 | import { take, ignoreElements } from 'rxjs/operators';
22 |
23 | // 每100毫秒发出值
24 | const source = interval(100);
25 | // 略所有值，只发出 complete
26 | const example = source.pipe(
27 | take(5),
28 | ignoreElements()
29 | );
30 | // 输出: "COMPLETE!"
31 | const subscribe = example.subscribe(
32 | val => console.log(`NEXT: ${val}`),
33 | val => console.log(`ERROR: ${val}`),
34 | () => console.log('COMPLETE!')
35 | );
36 | ```
37 |
38 | ##### 示例 2: 只显示错误
39 |
40 | (
41 | [StackBlitz](https://stackblitz.com/edit/typescript-3yxv9z?file=index.ts&devtoolsheight=100)
42 | | [jsBin](http://jsbin.com/gogonawuze/1/edit?js,console) |
43 | [jsFiddle](https://jsfiddle.net/btroncone/srcwdgw6/) )
44 |
45 | ```js
46 | // RxJS v6+
47 | import { interval, throwError, of } from 'rxjs';
48 | import { mergeMap, ignoreElements } from 'rxjs/operators';
49 |
50 | // 每100毫秒发出值
51 | const source = interval(100);
52 | // 忽略所有值，只发出 error
53 | const error = source.pipe(
54 | mergeMap(val => {
55 | if (val === 4) {
56 | return throwError(`ERROR AT ${val}`);
57 | }
58 | return of(val);
59 | }),
60 | ignoreElements()
61 | );
62 | // 输出: "ERROR: ERROR AT 4"
63 | const subscribe = error.subscribe(
64 | val => console.log(`NEXT: ${val}`),
65 | val => console.log(`ERROR: ${val}`),
66 | () => console.log('SECOND COMPLETE!')
67 | );
68 | ```
69 |
70 | ### 其他资源
71 |
72 | - [ignoreElements](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-ignoreElements) :newspaper: - 官方文档
73 |
74 | ---
75 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/ignoreElements.ts)
76 |
--------------------------------------------------------------------------------
/operators/filtering/last.md:
--------------------------------------------------------------------------------
1 | # last
2 |
3 | #### 函数签名: `last(predicate: function): Observable`
4 |
5 | ## 根据提供的表达式，在源 observable 完成时发出它的最后一个值。
6 |
7 | ---
8 |
9 | :bulb: 与 last 对应的操作符是 [**first**](first.md)！
10 |
11 | ---
12 |
13 |
14 |
15 | ### 示例
16 |
17 | ##### 示例 1: 序列中的最后一个值
18 |
19 | (
20 | [StackBlitz](https://stackblitz.com/edit/typescript-ma7knv?file=index.ts&devtoolsheight=100)
21 | | [jsBin](http://jsbin.com/pevaqeloki/1/edit?js,console) |
22 | [jsFiddle](https://jsfiddle.net/btroncone/b05r434a/) )
23 |
24 | ```js
25 | // RxJS v6+
26 | import { from } from 'rxjs';
27 | import { last } 'rxjs/operators';
28 |
29 | const source = from([1, 2, 3, 4, 5]);
30 | // 没有参数则发出最后一个值
31 | const example = source.pipe(last());
32 | // 输出: "Last value: 5"
33 | const subscribe = example.subscribe(val => console.log(`Last value: ${val}`));
34 | ```
35 |
36 | ##### 示例 2: 最后一个通过 predicate 函数的值
37 |
38 | (
39 | [StackBlitz](https://stackblitz.com/edit/typescript-tk42hj?file=index.ts&devtoolsheight=100)
40 | | [jsBin](http://jsbin.com/yagexuwari/1/edit?js,console) |
41 | [jsFiddle](https://jsfiddle.net/btroncone/pkx2btsh/) )
42 |
43 | ```js
44 | // RxJS v6+
45 | import { from } from 'rxjs';
46 | import { last } 'rxjs/operators';
47 |
48 | const source = from([1, 2, 3, 4, 5]);
49 | // 发出最后一个偶数
50 | const exampleTwo = source.pipe(last(num => num % 2 === 0));
51 | // 输出: "Last to pass test: 4"
52 | const subscribeTwo = exampleTwo.subscribe(val =>
53 | console.log(`Last to pass test: ${val}`)
54 | );
55 | ```
56 |
57 | ##### 示例 3: 使用结果选择器的 last
58 |
59 | (
60 | [StackBlitz](https://stackblitz.com/edit/typescript-nrc1an?file=index.ts&devtoolsheight=100)
61 | | [jsBin](http://jsbin.com/fudubebabi/1/edit?js,console) |
62 | [jsFiddle](https://jsfiddle.net/btroncone/L7fbx3vp/) )
63 |
64 | ```js
65 | // RxJS v6+
66 | import { from } from 'rxjs';
67 | import { last } 'rxjs/operators';
68 |
69 | const source = from([1, 2, 3, 4, 5]);
70 | // 没有值通过的话则发出默认值
71 | const exampleTwo = source.pipe(last(v => v > 5, 'Nothing!'));
72 | // 输出: 'Nothing!'
73 | const subscribeTwo = exampleTwo.subscribe(val => console.log(val));
74 | ```
75 |
76 | ### 其他资源
77 |
78 | - [last](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-last) :newspaper: - 官方文档
79 | - [过滤操作符: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
80 |
81 | ---
82 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/last.ts)
83 |
--------------------------------------------------------------------------------
/operators/filtering/sample.md:
--------------------------------------------------------------------------------
1 | # sample
2 |
3 | #### 函数签名: `sample(sampler: Observable): Observable`
4 |
5 | ## 当提供的 observable 发出时从源 observable 中取样。
6 |
7 |
8 |
9 | ### 示例
10 |
11 | ##### 示例 1: 每2秒对源 observable 取样
12 |
13 | (
14 | [StackBlitz](https://stackblitz.com/edit/typescript-envpsp?file=index.ts&devtoolsheight=100)
15 | | [jsBin](http://jsbin.com/gemebopifu/1/edit?js,console) |
16 | [jsFiddle](https://jsfiddle.net/btroncone/8wsbuvjb/) )
17 |
18 | ```js
19 | // RxJS v6+
20 | import { interval } from 'rxjs';
21 | import { sample } 'rxjs/operators';
22 |
23 | // 每1秒发出值
24 | const source = interval(1000);
25 | // 每2秒对源 observable 最新发出的值进行取样
26 | const example = source.pipe(sample(interval(2000)));
27 | // 输出: 2..4..6..8..
28 | const subscribe = example.subscribe(val => console.log(val));
29 | ```
30 |
31 | ##### 示例 2: 当 interval 发出时对源 observable 取样
32 |
33 | (
34 | [StackBlitz](https://stackblitz.com/edit/typescript-sgat7t?file=index.ts&devtoolsheight=100)
35 | | [jsBin](http://jsbin.com/cunicepube/1/edit?js,console) |
36 | [jsFiddle](https://jsfiddle.net/btroncone/b33kg9dn/) )
37 |
38 | ```js
39 | // RxJS v6+
40 | import { interval, zip, from } from 'rxjs';
41 | import { sample } from 'rxjs/operators';
42 |
43 | const source = zip(
44 | // 发出 'Joe', 'Frank' and 'Bob' in sequence
45 | from(['Joe', 'Frank', 'Bob']),
46 | // 每2秒发出值
47 | interval(2000)
48 | );
49 | // 每2.5秒对源 observable 最新发出的值进行取样
50 | const example = source.pipe(sample(interval(2500)));
51 | // 输出: ["Joe", 0]...["Frank", 1]...........
52 | const subscribe = example.subscribe(val => console.log(val));
53 | ```
54 |
55 | ##### 示例 3: 区分拖拽和点击
56 |
57 | 来源: [Stack Overflow](https://stackoverflow.com/a/44865892/2774547)
58 | 作者: [Dorus](https://stackoverflow.com/users/402027/dorus)
59 |
60 | (
61 | [StackBlitz](https://stackblitz.com/edit/typescript-vk8p3e?file=index.ts&devtoolsheight=100)
62 | | [jsBin](http://jsbin.com/riwipicilo/1/edit?html,js,console,output) |
63 | [jsFiddle](https://jsfiddle.net/6yy6q0Lo/1/) )
64 |
65 | ```js
66 | // RxJS v6+
67 | import { fromEvent, merge } from 'rxjs';
68 | import { sample, mapTo } from 'rxjs/operators';
69 |
70 | const listener = merge(
71 | fromEvent(document, 'mousedown').pipe(mapTo(false)),
72 | fromEvent(document, 'mousemove').pipe(mapTo(true))
73 | )
74 | .pipe(sample(fromEvent(document, 'mouseup')))
75 | .subscribe(isDragging => {
76 | console.log('Were you dragging?', isDragging);
77 | });
78 | ```
79 |
80 | ### 其他资源
81 |
82 | - [sample](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-sample) :newspaper: - 官方文档
83 |
84 | ---
85 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/sample.ts)
86 |
--------------------------------------------------------------------------------
/operators/filtering/single.md:
--------------------------------------------------------------------------------
1 | # single
2 |
3 | #### 函数签名: `single(a: Function): Observable`
4 |
5 | ## 发出通过表达式的单一项。
6 |
7 |
8 |
9 | ### 示例
10 |
11 | ##### 示例 1: 发出通过断言的第一个数字
12 |
13 | (
14 | [StackBlitz](https://stackblitz.com/edit/typescript-qhynlr?file=index.ts&devtoolsheight=100)
15 | | [jsBin](http://jsbin.com/solecibuza/1/edit?js,console) |
16 | [jsFiddle](https://jsfiddle.net/btroncone/26r5y90s/) )
17 |
18 | ```js
19 | // RxJS v6+
20 | import { from } from 'rxjs';
21 | import { single } from 'rxjs/operators';
22 |
23 | // 发出 (1,2,3,4,5)
24 | const source = from([1, 2, 3, 4, 5]);
25 | // 发出匹配断言函数的一项
26 | const example = source.pipe(single(val => val === 4));
27 | // 输出: 4
28 | const subscribe = example.subscribe(val => console.log(val));
29 | ```
30 |
31 | ### 其他资源
32 |
33 | - [single](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-single) :newspaper: - 官方文档
34 |
35 | ---
36 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/single.ts)
37 |
--------------------------------------------------------------------------------
/operators/filtering/skip.md:
--------------------------------------------------------------------------------
1 | # skip
2 |
3 | #### 函数签名: `skip(the: Number): Observable`
4 |
5 | ## 跳过N个(由参数提供)发出值。
6 |
7 | ### 为什么使用 `skip`？
8 |
9 | `skip` 允许你忽略源 observable 开头的n个值。通常，当你总是想忽略 observable 的某些值时，应该使用 `skip` 。或许你不需要这些开头的值，或许你订阅了 `Replay` 或 `BehaviorSubject` 从而不需要初始值。如果你不关心开头的一组值，那就使用 `skip` 吧。
10 |
11 | 你可以使用 [`filter`](./filter.md) 加索引来模拟 `skip` 。例如 `.filter((val, index) => index > 1)` 。
12 |
13 |
14 |
15 | ### 示例
16 |
17 | ##### 示例 1: 在发送前跳过N个值
18 |
19 | (
20 | [StackBlitz](https://stackblitz.com/edit/typescript-o5ydjf?file=index.ts&devtoolsheight=100)
21 | | [jsBin](http://jsbin.com/hacepudabi/1/edit?js,console) |
22 | [jsFiddle](https://jsfiddle.net/btroncone/ar1eqbya/) )
23 |
24 | ```js
25 | // RxJS v6+
26 | import { interval } from 'rxjs';
27 | import { skip } from 'rxjs/operators';
28 |
29 | // 每1秒发出值
30 | const source = interval(1000);
31 | // 跳过前5个发出值
32 | const example = source.pipe(skip(5));
33 | // 输出: 5...6...7...8........
34 | const subscribe = example.subscribe(val => console.log(val));
35 | ```
36 |
37 | #### 示例 2: filter 特定用法的简写形式
38 |
39 | (
40 | [StackBlitz](https://stackblitz.com/edit/typescript-yl3ap1?file=index.ts&devtoolsheight=100)
41 | | [jsBin](http://jsbin.com/judamurego/edit?js,console) |
42 | [jsFiddle](https://jsfiddle.net/ElHuy/4jswLn3z/) )
43 |
44 | ```js
45 | // RxJS v6+
46 | import { from } from 'rxjs';
47 | import { skip, filter } from 'rxjs/operators';
48 |
49 | const numArrayObs = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
50 |
51 | // 3,4,5...
52 | const skipObs = numArrayObs.pipe(skip(2)).subscribe(console.log);
53 |
54 | // 3,4,5...
55 | const filterObs = numArrayObs
56 | .pipe(filter((val, index) => index > 1))
57 | .subscribe(console.log);
58 |
59 | // 同样的输出！
60 | ```
61 |
62 | ### 其他资源
63 |
64 | - [skip](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-skip) :newspaper: - 官方文档
65 | - [过滤操作符: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
66 |
67 | ---
68 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skip.ts)
69 |
--------------------------------------------------------------------------------
/operators/filtering/skipuntil.md:
--------------------------------------------------------------------------------
1 | # skipUntil
2 |
3 | #### 函数签名: `skipUntil(the: Observable): Observable`
4 |
5 | ## 跳过源 observable 发出的值，直到提供的 observable 发出值。
6 |
7 | ### 示例
8 |
9 | ##### 示例 1: 跳过值直到另个 observable 发出值
10 |
11 | (
12 | [StackBlitz](https://stackblitz.com/edit/typescript-gs4mps?file=index.ts&devtoolsheight=100)
13 | | [jsBin](http://jsbin.com/tapizososu/1/edit?js,console) |
14 | [jsFiddle](https://jsfiddle.net/btroncone/xLu8nf77/) )
15 |
16 | ```js
17 | // RxJS v6+
18 | import { interval, timer } from 'rxjs';
19 | import { skipUntil } from 'rxjs/operators';
20 |
21 | // 每1秒发出值
22 | const source = interval(1000);
23 | // 跳过源 observable 发出的值，直到内部 observable 发出值 (6s后)
24 | const example = source.pipe(skipUntil(timer(6000)));
25 | // 输出: 5...6...7...8........
26 | const subscribe = example.subscribe(val => console.log(val));
27 | ```
28 |
29 | ### 其他资源
30 |
31 | - [skipUntil](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-skipUntil) :newspaper: - 官方文档
32 |
33 | ---
34 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipUntil.ts)
35 |
--------------------------------------------------------------------------------
/operators/filtering/skipwhile.md:
--------------------------------------------------------------------------------
1 | # skipWhile
2 |
3 | #### 函数签名: `skipWhile(predicate: Function): Observable`
4 |
5 | ## 跳过源 observable 发出的值，直到提供的表达式结果为 false 。
6 |
7 |
8 |
9 | ### 示例
10 |
11 | ##### 示例 1: 当值小于阈值的时候跳过
12 |
13 | (
14 | [StackBlitz](https://stackblitz.com/edit/typescript-p5kapz?file=index.ts&devtoolsheight=100)
15 | | [jsBin](http://jsbin.com/bemikuleya/edit?js,console) |
16 | [jsFiddle](https://jsfiddle.net/btroncone/3ymfxb09/) )
17 |
18 | ```js
19 | // RxJS v6+
20 | import { interval } from 'rxjs';
21 | import { skipWhile } from 'rxjs/operators';
22 |
23 | // 每1秒发出值
24 | const source = interval(1000);
25 | // 当源 observable 发出的值小于5的时候，则跳过该值
26 | const example = source.pipe(skipWhile(val => val < 5));
27 | // 输出: 5...6...7...8........
28 | const subscribe = example.subscribe(val => console.log(val));
29 | ```
30 |
31 | ### 其他资源
32 |
33 | - [skipWhile](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-skipWhile) :newspaper: - 官方文档
34 |
35 | ---
36 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/skipWhile.ts)
37 |
--------------------------------------------------------------------------------
/operators/filtering/take.md:
--------------------------------------------------------------------------------
1 | # take
2 |
3 | #### 函数签名: ` take(count: number): Observable`
4 |
5 | ## 在完成前发出N个值(N由参数决定)。
6 |
7 | ### 为什么使用 `take`？
8 |
9 | 当只对开头的一组值感兴趣时，你想要的便是 `take` 操作符。也许你想看看当用户第一次进入页面时，用户首先点击的是什么，你想要订阅点击事件并只取首个值。举例来说，你想要观看赛跑，但其实你只对首先冲过终点的人感兴趣。此操作符很清晰明了，你想要取开头*n*个值。
10 |
11 | ---
12 |
13 | :bulb: 如果想基于某个逻辑或另一个 observable 来取任意数量的值，你可以 [takeUntil](takeuntil.md) 或 [takeWhile](takewhile.md)！
14 |
15 | :bulb: `take` 与 `skip` 是相反的，它接收起始的N个值，而 `skip` 会跳过起始的N个值。
16 |
17 | ---
18 |
19 |
20 |
21 | ### 示例
22 |
23 | ##### 示例 1: 从源 observable 中取第一个值
24 |
25 | (
26 | [StackBlitz](https://stackblitz.com/edit/typescript-uk92ax?file=index.ts&devtoolsheight=100)
27 | | [jsBin](http://jsbin.com/vaxitupiwi/1/edit?js,console) |
28 | [jsFiddle](https://jsfiddle.net/btroncone/f9bz0tr3/) )
29 |
30 | ```js
31 | // RxJS v6+
32 | import { of } from 'rxjs';
33 | import { take } from 'rxjs/operators';
34 |
35 | // 发出 1,2,3,4,5
36 | const source = of(1, 2, 3, 4, 5);
37 | // 取第一个发出的值然后完成
38 | const example = source.pipe(take(1));
39 | // 输出: 1
40 | const subscribe = example.subscribe(val => console.log(val));
41 | ```
42 |
43 | ##### 示例 2: 从源 observable 中取前5个值
44 |
45 | (
46 | [StackBlitz](https://stackblitz.com/edit/typescript-3ujuth?file=index.ts&devtoolsheight=100)
47 | | [jsBin](http://jsbin.com/kexenuzulu/edit?js,console) |
48 | [jsFiddle](https://jsfiddle.net/btroncone/g1fhxgua/) )
49 |
50 | ```js
51 | // RxJS v6+
52 | import { interval } from 'rxjs';
53 | import { take } from 'rxjs/operators';
54 |
55 | // 每1秒发出值
56 | const interval$ = interval(1000);
57 | // 取前5个发出的值
58 | const example = interval$.pipe(take(5));
59 | // 输出: 0,1,2,3,4
60 | const subscribe = example.subscribe(val => console.log(val));
61 | ```
62 |
63 | ##### 示例 3: 取得首次点击的坐标
64 |
65 | ([StackBlitz](https://stackblitz.com/edit/typescript-8g9xt5?file=index.ts&devtoolsheight=50)
66 | | [jsFiddle](https://jsfiddle.net/ElHuy/9c5j064x/))
67 |
68 | ```html
69 |
70 | Where would you click first?
71 |
72 | ```
73 |
74 | ```js
75 | // RxJS v6+
76 | import { fromEvent } from 'rxjs';
77 | import { take, tap } from 'rxjs/operators';
78 |
79 | const oneClickEvent = fromEvent(document, 'click').pipe(
80 | take(1),
81 | tap(v => {
82 | document.getElementById(
83 | 'locationDisplay'
84 | ).innerHTML = `Your first click was on location ${v.screenX}:${v.screenY}`;
85 | })
86 | );
87 |
88 | const subscribe = oneClickEvent.subscribe();
89 | ```
90 |
91 | ### 其他资源
92 |
93 | - [take](https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-take) :newspaper: - 官方文档
94 | - [过滤操作符: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz
95 |
96 | ---
97 | > :file_folder: 源码: [https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/take.ts)
98 |
--------------------------------------------------------------------------------
/operators/filtering/takeuntil.md:
--------------------------------------------------------------------------------
1 | # takeUntil
2 |
3 | #### 函数签名: ` takeUntil(notifier: Observable): Observable`
4 |
5 | ## 发出值，直到提供的 observable 发出值，它便完成。
6 |
7 | ---
8 |
9 | :bulb: 如果你只需要指定数量的值，试试 [take](take.md)！
10 |
11 | ---
12 |
13 | 
${data}
`);
56 | };
57 |
58 | // 模拟5个不同时长的请求
59 | const observables: Array> = [
60 | requestOne,
61 | requestTwo,
62 | requestThree,
63 | requestFour,
64 | requestFive
65 | ];
66 |
67 | const array$ = from(observables);
68 | const requests$ = array$.pipe(concatAll());
69 | const clicks$ = fromEvent(loadButton, 'click');
70 |
71 | const progress$ = clicks$.pipe(
72 | switchMapTo(requests$),
73 | share()
74 | );
75 |
76 | const count$ = array$.pipe(count());
77 |
78 | const ratio$ = progress$.pipe(
79 | scan(current => current + 1, 0),
80 | withLatestFrom(count$, (current, count) => current / count)
81 | );
82 |
83 | clicks$.pipe(switchMapTo(ratio$)).subscribe(updateProgress);
84 |
85 | progress$.subscribe(displayData);
86 | ```
87 |
88 | ##### html
89 |
90 | ```html
91 |
94 |
95 |
98 |
99 |
100 |
101 |
102 | ```
103 |
104 | _感谢 [@johnlinquist](https://twitter.com/johnlindquist) 对本示例的帮助！_
105 |
106 | ### 使用到的操作符
107 |
108 | - [concatAll](../operators/transformation/concatall.md)
109 | - [delay](../operators/utility/delay.md)
110 | - [fromEvent](../operators/creation/fromevent.md)
111 | - [from](../operators/creation/from.md)
112 | - [scan](../operators/transformation/scan.md)
113 | - [share](../operators/multicasting/share.md)
114 | - [switchMap](../operators/transformation/switchmap.md)
115 | - [withLatestFrom](../operators/transformation/withlatestfrom.md)
116 |
--------------------------------------------------------------------------------
/styles/website.css:
--------------------------------------------------------------------------------
1 | .ua-ad {
2 | text-align: center;
3 | padding: 10px 0;
4 | }
5 |
--------------------------------------------------------------------------------
2 |
3 | # 学习 RxJS 操作符
4 |
5 | 本仓库是 [Learn RxJS](https://github.com/btroncone/learn-rxjs) 的中文版。
6 |
7 | 意在通过每个操作符的清晰示例及解释来进行 RxJS 的学习。
8 |
9 | > 其实原作者还有其他想法(比如， 更底层的一些概念及更丰富的实战示例)，但目前来看，主要还是进行操作符的讲解，所以我将此库命名为 “学习 RxJS 操作符”
10 |
11 | 希望各位喜欢，另外配合[官方中文文档操作符篇](https://cn.rx.js.org/class/es6/Observable.js~Observable.html)来学习效果更佳。
12 |
13 | > 电子书: [pdf格式](https://github.com/RxJS-CN/learn-rxjs-operators/raw/gh-pages/ebook/学习RxJS操作符.pdf) | [mobi格式](https://github.com/RxJS-CN/learn-rxjs-operators/raw/gh-pages/ebook/学习RxJS操作符.mobi) | [epub格式](https://github.com/RxJS-CN/learn-rxjs-operators/raw/gh-pages/ebook/学习RxJS操作符.epub)
14 |
--------------------------------------------------------------------------------
/asset/Rx_Logo_M.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RxJS-CN/learn-rxjs-operators/62e3b1714d6667bc652367c2ec53a23121a9e647/asset/Rx_Logo_M.png
--------------------------------------------------------------------------------
/book.json:
--------------------------------------------------------------------------------
1 | {
2 | "gitbook": "3.1.1",
3 | "title": "学习 RxJS 操作符",
4 | "structure": {
5 | "readme": "index.md"
6 | },
7 | "plugins": [
8 | "include-codeblock",
9 | "advanced-emoji",
10 | "prism",
11 | "highlight",
12 | "copy-code-button",
13 | "edit-link",
14 | "github",
15 | "github-buttons"
16 | ],
17 | "pluginsConfig": {
18 | "edit-link": {
19 | "base": "https://github.com/RxJS-CN/learn-rxjs-operators/tree/master",
20 | "label": "帮忙纠错"
21 | },
22 | "github": {
23 | "url": "https://github.com/RxJS-CN/learn-rxjs-operators"
24 | },
25 | "github-buttons": {
26 | "buttons": [{
27 | "user" : "RxJS-CN",
28 | "repo" : "learn-rxjs-operators",
29 | "type" : "star",
30 | "size" : "small",
31 | "count": true
32 | }, {
33 | "user" : "RxJS-CN",
34 | "repo" : "learn-rxjs-operators",
35 | "type" : "fork",
36 | "size" : "small",
37 | "count": true
38 | }]
39 | }
40 | }
41 | }
--------------------------------------------------------------------------------
/concepts/README.md:
--------------------------------------------------------------------------------
1 | # 概念
2 |
3 | 对于常见的 RxJS 场景和用例的简要说明。
4 |
5 | ### 内容
6 |
7 | * [RxJS v5 -> v6 升级](rxjs5-6.md)
8 | * [理解操作符导入](operator-imports.md)
9 |
--------------------------------------------------------------------------------
/concepts/operator-imports.md:
--------------------------------------------------------------------------------
1 | # 理解操作符导入
2 |
3 | 在消费或创建依赖于 RxJS 的公共库时，你可能遇到处理运算符导入的问题。在项目中引入操作符最主要的方式像下面这样导入:
4 |
5 | ```js
6 | import 'rxjs/add/operator/take';
7 | ```
8 |
9 | 这会将导入的操作符添加到 `Observable` 的原型上，以便在整个项目中使用:
10 |
11 | [(源码)](https://github.com/ReactiveX/rxjs/blob/master/src/add/operator/take.ts)
12 |
13 | ```js
14 | import { Observable } from '../../Observable';
15 | import { take } from '../../operator/take';
16 |
17 | Observable.prototype.take = take;
18 |
19 | declare module '../../Observable' {
20 | interface Observable