Agular 中的 RxJS 之可观察对象的特性介绍「这是我参与2022首次更文挑战的第24天，活动详情查看：2022

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

前言

上一次快速入门当中，我们大概介绍了 RxJS 的一些基础作用，以及一些基本的概念和一个简单的小例子，今天我们将会去详细介绍一下 可观察对象的一些特性

可观察对象的特性

1. 内部可多次调用 next 方法

在 Promise 中，我们的回调只能从等待状态返回成功状态，或者从等待状态返回失败状态，最后回来的值一定只会有一个。但是在可观察对象中就不是这样的了。

可观察对象中可以调用多次 next 方法向外发送数据

接下来我们来看一段代码理解一下：

const observable = new Observable(function (observer) {
  let index = 0;
  setInterval(() => {
    observer.next(index)
    index++
  }, 1000);
})

const observer = {
  next: (value) => {
    console.log(value.name);
  },
};

observable.subscribe(observer);

//输出
0
1
2
...

在可观察对象中，我们开启了一个定时器，并且这个定时器每秒都会执行一次，每次执行就会调用观察者传入的 next 方法并且把不同的 index 返回出去。

从这我们就能够看出来可观察对象和 Promise 的不同之处，它可以多次对外传递数据。

2. 数据发送完成之后，可以使用 complete 方法终止

像上方我们开启了一个定时器，那如果没有进行关闭的话，就会一直运行下去，所以我们需要一个方法来进行判断，当我们不需要发送数据的时候，终止 next 的调用。

我们可以在观察者中添加一个终止方法 complete，但是这个 complete 方法是不能够传递参数的，哪怕是你传递了，外面的方法也接收不到。

complete: ()=>{
    console.log('定时器已关闭')
}

然后在可观察对象中去调用它：

const observable = new Observable(function (observer) {
  let index = 0;
  let timer = setInterval(() => {
    observer.next(index);
    index++
    if (index == 2) {
      observer.complete();
      clearInterval(timer);
    }
  }, 1000);
});

//输出
0
1
2
定时器已关闭

这样我们就能够在我们想要的时候关闭调用。

3. 当可观察对象内部出错时，可以调用 error 方法发送失败信息，可观察对象终止

和 complete 类似，在我们需要的时候也可以去调用观察者的 error 方法来返回错误信息，并且可观察对象会终止：

error: (error) => {
    console.log(error);
},

然后在可观察对象中刚刚的 complete 我们替换为 error：

const observable = new Observable(function (observer) {
  let index = 0;
  let timer = setInterval(() => {
    observer.next(index);
    index++;
    if (index == 2) {
      // observer.complete();
      observer.error("发生错误");
      clearInterval(timer);
    }
  }, 1000);
});

//输出
0
1
2
发生错误

然后我们要注意的一点是，在调用了 complete 或者 error 之后，观察者身上的 next 方法就无法被调用了，因为可观察对象停止了。比方说：

if (index == 2) {
    // observer.complete();
    observer.error("发生错误");
    observer.next("我又被调用了");
    clearInterval(timer);
}

我们在 error 后面立马在调用一次 next 方法，但是最后是不会输出的。

4. 可观察对象只有被订阅之后才会执行

如果上述代码中哪一个少了：

observable.subscribe(observer);

这一句订阅逻辑的话，那么可观察对象中的方法是不会被调用的，只有当你订阅它的时候，它才会去执行逻辑

比如：

const observable = new Observable(function (observer) {
  console.log("可观察对象执行了");
});

这样一段代码在控制台当中是不会有任何输出的。

5. 可观察对象可以有 n 个订阅者，每次被订阅都会执行

比方说下面这段代码，我们订阅了三次的可观察对象，那么可观察对象中的逻辑就会被执行三次

const observable = new Observable(function (observer) {
  console.log("可观察对象执行了");
});
observable.subscribe(observer);
observable.subscribe(observer);
observable.subscribe(observer);

//输出
可观察对象执行了
可观察对象执行了
可观察对象执行了

总结

本篇总结了一些 Observable 的特性，在接下去的系列文章当中，也会继续的去介绍 Rxjs 这个库的另外一些属性的使用。

Agular 中的 RxJS 之 可观察对象的特性介绍

前言