Agular 中的 RxJS 之快速入门「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战

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

什么是 RxJS？

RxJS 作为一个用于处理异步编程的 JavaScript 库，目的就是让我们能够更加方便的去编写异步和基于回调的代码。

当我们看完 RxJS 的作用的时候，第一个会想到的肯定就是平时最经常用到的 Promise，因为 Promise 也是用于处理异步编程的。但是 Promise 能够做到的事情，RxJS 也能够做到，并且 RxJS能够做到的比 Promise 更多，因为在 RxJS 中提供了很多 Promise 没有提供的功能。

为什么要学习 RxJS

因为 RxJS 在 Angular 中的地位非常之高，我们在很多情况下都可以去使用 RxJS，就像 Angular 深度集成了 TypeScrpit 一样，Angular 也深度集成了 RxJS，并且它还能够提供很多 Promise 没有的功能。

RxJS 的实例经常会被成为数据流，就像是在一个异步操作执行的过程当中，你并不知道它什么时候会完成，就像你不知道什么时候数据会流出来，而 RxJS 就是会帮我们把流出来的数据做一个处理，比如整合啊，筛选啊，转换啊，我们都可以去使用 RxJS 的 api 来帮我简化这些操作。

快速入门

我们先来了解一下 RxJS 的一些概念

可观察对象(Observable)

Observable 对象可以和 Promise 对象做一个类比，内部用于执行异步代码。

在 Promise 中，我们会在结束的时候调用 resolve 和 reject 这两个方法把数据传递到 Promise 外部。

在 Observable 中，我们也可以去执行异步代码，并且在执行完成之后，Observable 也提供了一些方法来让我们把数据传递到外部

观察者(Observer)

Observer 对象可以和 then 方法中的回调函数做一个类比，用于接收可观察对象中传递出来的数据。

在 Promise 中，then方法的回调函数用于接收 Promise 对象内部传递出来的数据。

在 Observer 中，我们也可以用它，来接收可观察对象内部传递出来的数据。

订阅(subscribe)

订阅(subscribe) 可以和 Promise中的 then 方法做一个类比，用于连接 Promise对象和接收数据的方法。

学习过 观察者模式 的话，应该对订阅做的事情比较的清楚，我们可以让观察者去订阅可观察者内部的数据，这样在可观察者数据流出的时候，就会去调用观察者订阅的方法了。

不清楚观察者模式的话，可以看一下我之前写过的观察者模式的文章。

设计模式中一对多的观察者模式 - 掘金 (juejin.cn)

接着我们还可以用一张图来更加清晰的看一下他们之间的关系。

观察者可以通过 subscribe 和可观察对象建立联系，可观察对象可以通过 next 给观察者传递数据。

实际代码

接下来我们就通过一段代码来简单的了解一下上述提到的概念

上面说到了由于 RxJS 是一个库，所以我们要使用它需要导入 RxJS

import { Observable } from "rxjs";

const observable = new Observable(function (observer) {
  setTimeout(() => {
    observer.next({
      name: "张三",
    });
  }, 2000);
});

const observer = {
  next: (value) => {
    console.log(value.name);  //输出 张三
  },
};

observable.subscribe(observer);

我们在我们的 Observable 中定义了一个定时器来模式异步操作，并且通过传入的观察者中的 next 方法将数据传递出去。

在添加了订阅之后，我们成功调用 observer 观察者中的 next 方法输出了可观察对象传递给我们的数据。

那么上面就是一个简单的使用实例，可以看出，Observable 和 Promise 很相似，都是用于处理异步函数的。Observable是基于 观察者模式 做了一个异步数据的传输，在了解这些之前，应该要先去了解 观察者模式 的一个原理才会更加的容易理解。

总结

本文稍微介绍了一下 RxJS 的一些基础概念，并且在接下来，这个系列会更加清楚地讲述关于 RxJS 的使用，慢慢的去了解和学习更多关于 RxJS 在 Angular 中的应用

Agular 中的 RxJS 之 快速入门