RxJS中的Subject

本文作者: jsweibo

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

摘要

本文主要讲述了：

什么是 Subject
备注

正文

什么是 Subject

Subject，意为主体

Subject是 RxJS 中的类。Subject是Observable的派生类，因此可以视作特殊的Observable

备注

订阅之后手动推送

相当于把可观察对象和订阅者之间的“订阅协议”放在外面

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

示例：

输入：

<!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 subject = new rxjs.Subject();
      const subscription = subject.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          console.log(error);
        },
        complete() {
          console.log('complete');
        },
      });
      subject.next(1);
      subject.next(2);
      subject.next(3);
    </script>
  </head>
  <body></body>
</html>

输出：

1
2
3

1
2
3

重复订阅重复接收

示例：

<!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 subject = new rxjs.Subject();
      subject.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          console.log(error);
        },
        complete() {
          console.log('complete');
        },
      });
      subject.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          console.log(error);
        },
        complete() {
          console.log('complete');
        },
      });
      subject.next(1);
      subject.next(2);
      subject.next(3);
    </script>
  </head>
  <body></body>
</html>

输出：

作为 Observable 实例的订阅者

示例：

输入：

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

      const subject = new rxjs.Subject();

      const subscription = subject.subscribe({
        next(x) {
          console.log(x);
        },
        error(error) {
          console.log(error);
        },
        complete() {
          console.log('complete');
        },
      });

      observable.subscribe(subject);
    </script>
  </head>
  <body></body>
</html>