thoughts/Miscellaneous/rxjs/11-switchMap.html at master · zizifn/thoughts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<html>

<head>
    <title>RXJS sample</title>
    <!-- Everything is imported under the rxjs namespace -->
    <script src="./rxjs.umd.js"></script>
</head>

<body>
    <button id="button1">click me</button>
    <button id="button2">click me2</button>
    <script>
        const fromEvent = rxjs.fromEvent;
        const interval = rxjs.interval;
        const Observable = rxjs.Observable;
        const of = rxjs.of;
        const Subject = rxjs.Subject;
        const map = rxjs.operators.map;
        const tap = rxjs.operators.tap;
        const take = rxjs.operators.take;
        const throttleTime = rxjs.operators.throttleTime;
        // wait for some time, reduce http request
        const debounceTime = rxjs.operators.debounceTime;
        const distinctUntilChanged = rxjs.operators.distinctUntilChanged;

        const scan = rxjs.operators.scan;
        const reduce = rxjs.operators.reduce;

        const pluck = rxjs.operators.pluck;

        const concatMap = rxjs.operators.concatMap;
        const mergeMap = rxjs.operators.mergeMap;
        const mergeAll = rxjs.operators.mergeAll;
        const switchMap = rxjs.operators.switchMap;
        const delay = rxjs.operators.delay;
        const catchError = rxjs.operators.catchError;
        const throwError = rxjs.operators.throwError;

        const filter = rxjs.operators.filter;

        var button = document.querySelector("#button1");
        var button2 = document.querySelector("#button2");

        var obserable2 = interval(1000);

        fromEvent(button, "click")
            .pipe(switchMap((event) => obserable2))
            .subscribe(
                (value) => console.log(value),
                (error) => console.log(error),
                () => console.log("complete")
            );

        const switched = of(1, 2, 3).pipe(
            switchMap((x) => of(x, x ** 2, x ** 3).pipe(delay(100)))
        );
        switched.subscribe((x) => console.log(x));

        var s1 = new Subject();
        function check(value) {
            if (value === 3) {
                throw new Error("error in check");
            }
            return value;
        }
        function checkOuter(value) {
            if (value === 4) {
                throw new Error("error in check");
            }
            return value;
        }
        s1.pipe(
            concatMap((value) => {
                if (value === 5) {
                    throw new Error("error in check");
                }
                return of(value).pipe(
                    filter(check),
                    catchError((error) => {
                        console.log("inner observable error");
                        return rxjs.empty();
                    })
                );
            }),
            filter(checkOuter), // 把可能出现的error的，放入到 switchMap，这样就不会end source observable
            catchError((error) => {
                console.log("outer observable error");
                return of("outer error catch");
            })
        ).subscribe(
            (e) => {
                try {
                    console.log("sub" + e);
                } catch { }
            },
            console.log,
            () => console.log("completed")
        );

        s1.next("11"); // 11
        s1.next(3); // inner observable error <br> inner error catch.
        s1.next("11"); // 11
        // s1.next(4) //outer observable error <br> outer error catch
        s1.next("11"); // no output, 没有output 原因是，遇到error 会observable end
        s1.observers; // []

        // s1.subscribe(
        //     (value) => {
        //         try {
        //             if (value === 4) {
        //                 throw new Error('error in check')
        //             }
        //             console.log(value)
        //         } catch {

        //         }
        //     }
        // )
        // 1
        // 1
        // 1
        // 2
        // 4
        // 8

        // 测试1
        /*
                  var s2 = new Subject();
                  // 1. work fine.
                  s2.subscribe(
                      (rep) => {
                          console.log("first subscribe " + rep)
                      },
                      console.log, () => console.log('completed')
                  )

                  // 2. subscribe has error
                  s2.subscribe(
                      (rep) => {
                          console.log('second subscribe ' + rep)
                          throw new Error('error in second subscribe')
                      },
                      console.log, () => console.log('completed')
                  )

                  s2.next('test') // 这里第二个 subscribe 会报错，然后observable不在工作。 但是不会影响第一个的正常工作
                  s2.next('test2') // 这里可以证明第一个 subscribe 工作正常
          */

        // 测试2
        /*
        var s2 = new Subject();
        // 1. work fine.
        s2.subscribe(
            (rep) => {
                console.log("first subscribe " + rep)
            },
            console.log, () => console.log('completed')
        )
        const s22 = s2.pipe(

            tap(
                (resp) => {
                    return resp
                }
            )
        ).subscribe(
            (rep) => {
                console.log('second subscribe (in subscribe) ' + rep)
            },
            (error) => {
                console.log(error)
            }, () => console.log('completed')
        )
        s22.pipe(
            filter(
                (res) => true
            )
        ).subscribe(
            (rep) => {
                console.log('second subscribe (in subscribe) ' + rep)
            },
            (error) => {
                console.log(error)
            }, () => console.log('completed')
        )
       // s2.next('test') // 这里第二个 observable 在pipe中 报错，然后observable不在工作。 但是不会影响第一个的正常工作
       // s2.next('test2') // 这里可以证明第一个 subscribe 工作正常*/

        // 测试3， 怎么解决这种问题？ 就是用siwtch map
        /**/
        var s22 = new Subject();
        var s2 = new Subject();
        // 1. work fine.
        s2.subscribe(
            (rep) => {
                console.log("first subscribe " + rep);
            },
            console.log,
            () => console.log("completed")
        );
        const ss2 = s2.pipe(
            concatMap((resp) => {
                return s22.pipe(
                    // tap((res) => {
                    //     console.log("second observable (in switchMap->pipe) " + res);
                    //     //throw new Error("error in second observable->switchMap->pipe");
                    // }),
                    map((res) => {
                        console.log("second observable (in switchMap->pipe) " + res);
                        throw new Error("error in second observable->switchMap->pipe");
                        // return res;
                    }),
                    catchError(error => {
                        console.log('outer observable error');
                        return of('outer error catch');
                    })
                );
            }),
            tap(
                () => console.log('tap')
            ),
            catchError(error => {
                console.log('outer observable error');
                return of('outer error catch');
            })
        )
        ss2.subscribe(
            (rep) => {
                console.log("second subscribe (in subscribe) " + rep);
            },
            (error) => {
                console.log(error)
            },
            () => console.log("completed")
        );

    </script>
</body>

</html>