语言►JavaScript►库►rxjs

RxJS中的Observable

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/22/RxJS%E4%B8%AD%E7%9A%84Observable/

摘要

本文主要讲述了：

  1. 什么是 Observable
  2. 新建 Observable 实例
  3. 订阅 Observable 实例
  4. 备注

正文

什么是 Observable

Observable，意为可观察的。

Observable是 RxJS 中的类。

Observable可以视作生成器函数和Promise的混合体。

新建 Observable 实例

示例：使用new运算符新建Observable实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);
      });
    </script>
  </head>
  <body></body>
</html>

将其他类型的数据转换为 Observable 实例

示例：将数组转换为Observable实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      // 将数组中的元素一个接一个地同步推送给订阅者
      const observable = new rxjs.from([1, 2, 3]);
    </script>
  </head>
  <body></body>
</html>

示例：使用of运算符将数组转换为Observable实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      // 将数组一次性同步推送给订阅者
      const observable = new rxjs.of([1, 2, 3]);

      // 将参数列表一个接一个地同步推送给订阅者
      const observable = new rxjs.of(1, 2, 3);
    </script>
  </head>
  <body></body>
</html>

订阅 Observable 实例

Observable.prototype.subscribe()可以接受一个包含next、error、complete方法的对象，也可以接受几个同名函数。

示例：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);
      });

      observable.subscribe(
        function (x) {
          console.log(x);
        },
        function (error) {
          console.log(error);
        },
        function () {
          console.log('complete');
        }
      );
    </script>
  </head>
  <body></body>
</html>

订阅下一步

示例：

输入：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        // 显式调用
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);
      });

      observable.subscribe({
        next(x) {
          // 显式调用，才会执行
          console.log(x);
        },
      });
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3
1
2
3

订阅错误

示例：隐式调用

输入：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);

        // 隐式调用
        abc;

        // 不会执行
        subscriber.next(4);
      });

      observable.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          // 隐式调用，执行
          console.log(error);
        },
      });
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3
4
1
2
3
"ReferenceError: abc is not defined"

显式调用

示例：

输入：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);

        // 显式调用
        subscriber.error('hello, world');

        // 不会执行
        subscriber.next(4);
      });

      observable.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          // 显式调用，执行
          console.log(error);
        },
      });
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3
4
1
2
3
"hello, world"

订阅完成

示例：

输入：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);

        // 显式调用
        subscriber.complete();

        // 不会执行
        subscriber.next(4);
      });

      const subscribtion = observable.subscribe({
        next(x) {
          console.log(x);
        },
        complete() {
          // 显式调用，才会执行
          console.log('complete');
        },
      });
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3
4
1
2
3
"complete"

备注

不订阅，不执行

示例：

输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function () {
        console.log(1);
      });
    </script>
  </head>
  <body></body>
</html>

输出：

无输出

每订阅一次，就执行一次

示例：

输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function () {
        console.log(1);
      });
      observable.subscribe();
      observable.subscribe();
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
1
1

同步推送

示例：

输入：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@6/dist/global/rxjs.umd.js"></script>
    <script type="text/babel">
      const observable = new rxjs.Observable(function (subscriber) {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);
      });

      console.log('begin');
      observable.subscribe({
        next(x) {
          console.log(x);
        },
      });
      console.log('end');
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3
4
5
begin
1
2
3
end

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/22/RxJS%E4%B8%AD%E7%9A%84Observable/

本文对你有帮助？请支持我

支付宝
微信