学好 RxJS 的关键是对 Operators (操作符)的灵活使用,操作符大多是纯函数,我们使用操作符创建,转换,过滤,组合,错误处理,辅助操作 Observables。具体参见 (opens new window) 不同的操作符有不同的使用场景,有些名字容易混淆,可以对比的学习。

下面介绍几个可以创建 Observable 的运算符,具体的介绍请问官网 例子:https://codepen.io/mafeifan/pen/eQKNvN

  const {from, of, range, interval, timer, empty} = rxjs;

  function f() {
    return from(arguments);
  }

  const observer = {
    next: value => {
      console.log('Next: ' + value);
    },
    error: error => {
      console.log('Error:', error);
    },
    complete: () => {
      console.log('Complete');
    }
  }

  // Array Like Object
  f(1, 2, 3).subscribe(observer);

  // string
  // from 接收数组
  // 如果是字符串,会打印每一个字符
  from('foo').subscribe(observer);

  // Set, any iterable object
  const s = new Set(['foo', window]);
  from(s).subscribe(observer);

  // Promise
  const source = from(new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Hello RxJS!');
      },3000)
    }));

  source.subscribe(observer);
  // 传啥输出啥
  /*
  Next: 1
  Next: 2
  Next: 3
  */
  of(1, 2, 3).subscribe(observer);

  // Next: 4,5,6
  of([4, 5, 6]).subscribe(observer);

  // https://rxjs-dev.firebaseapp.com/api/index/function/range
  // 从10开始递增+1连续发射两次, 输出 10, 11
  /*
    Next: 10,
    Next: 11
  */
  range(10, 2).subscribe(observer);

  // 从0开始计数,每间隔num ms秒发射一次
  const num = 1000;
  interval(num).subscribe(observer);

  // 延迟2秒发射
  timer(2000).subscribe(observer);

  // 不会执行 next,直接执行 complete
  empty().subscribe({
    next: () => console.log(`empty`),
    complete: () => console.log('empty Complete!')
  });

  // 延迟5秒发射, 间隔1秒发射一次
  const subscription = timer(5000, 1000).subscribe(observer);
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
上次更新: 2022/12/1 05:42:45