RxJS中的Subscription

本文作者: jsweibo

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

摘要

本文主要讲述了：

什么是 Subscription
如何取消订阅
是否取消订阅
清理战场

正文

什么是 Subscription

Subscription，意为订阅。

Subscription是 RxJS 中的类。

订阅一个Observable实例将返回一个Subscription实例。Subscription表示一种订阅关系。

如何取消订阅

示例：手动取消订阅

输入：

<!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);

        // 由于取消了订阅，因此接受不到
        setTimeout(function () {
          subscriber.next(4);
        }, 1e3);
      });

      const subscription = observable.subscribe({
        next(x) {
          console.log(x);
        },
      });

      subscription.unsubscribe();
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3

1
2
3

其他情况

若“订阅协议”中发生了错误，或调用了error()或complete()，订阅会被自动取消。

是否取消订阅

Subscription实例拥有名为closed的实例属性。

true 已取消订阅
false 未取消订阅

示例：

<!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);
      });

      const subscription = observable.subscribe({
        next(x) {
          console.log(x);
        },
      });

      // 输出：false
      console.log(subscription.closed);

      // 取消订阅
      subscription.unsubscribe();

      // 输出：true
      console.log(subscription.closed);
    </script>
  </head>
  <body></body>
</html>

清理战场

在“订阅协议”中返回一个函数，用于在取消订阅后清理战场。

示例：

输入：

<!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);

        // 返回一个函数，用于在取消订阅后清理战场
        return function () {
          console.log('clear');
        };
      });

      const subscription = observable.subscribe({
        next(x) {
          console.log(x);
        },
      });
      subscription.unsubscribe();
    </script>
  </head>
  <body></body>
</html>