Agular 中的 RxJS 之辅助方法

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

前言

之前我们介绍了 RxJS 的数据流和操作符，顺带举了两个例子来介绍一下什么是数据流，什么是操作符，在接下去还要继续去介绍几个，比较常用的辅助方法，来加深对数据流和操作符的认识，和实际的使用。

本文主要要介绍 4 个辅助方法，以及举一些简单的例子，辅助方法主要是能把我们日常常见的一些长江转化为可观察对象。

辅助方法 from

将 Array、Promise、Iterator 转为 observable 对象

上次我们讲到数据流，这个 from 辅助方法也是一个数据流方法，数据流的定义是：从可观察对象内部流出的数据叫做数据流，可观察对象可以向外部源源不断的输出数据

那么 from 方法，就是会将上述的三种转为 observable 对象，并且我们可以通过订阅拿到它里面流出来的数据：

然后让我们在实际的代码中来看一下这个辅助方法：

import { from } from "rxjs";

console.log(from([1, 2, 3]));

from([1, 2, 3]).subscribe((e) => console.log(e));
复制代码

可以看到 from 方法返回给我们的是一个 observable，并且在订阅之后会流出数组中的三个元素给我们。

然后，from方法还可以将 Promise 对象转化为 observable 对象，这个就有意思了，在之前的介绍当中，我们都知道，observable 相比于 Promise 有着更多的操作方法，那么在需要的情况下进行这个转化，那肯定是能更加方便我们去定制一些需求的。那么我们就用实际的代码来看一下，是否是真的能做出一个转化：

import { from } from "rxjs";

function pro() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 1, success: true });
    }, 2000);
  });
}

console.log(from(pro()));

from(pro()).subscribe((e) => console.log(e));
复制代码

我们用一个定时器来模拟一下发送请求之后返回的 Promise，可以从浏览器中看到，它被成功的转化为了 observable 对象，那么在这之后我们就可以对它使用一些操作方法。这在我们日常的使用中也是很常见的，比如上面这个例子就是模仿了平时向服务端发送的请求，返回的一般就是一个 Promise 对象，那么我们就可以对其进行转化，来更加方便我们之后的操作。

辅助方法 forkJoin

可以类比 Promise.all(),既表示等到所有的 observable 都完成会后，一次性返回所有的值。

从上图中我们可以看出来，forkJoin 方法就是会将两个返回时间不一样的 observable 一次性一起返回，这就是它的作用，然后我们可以用两个不同的 Promise 来模拟一下请求的状况。

import { from, forkJoin } from "rxjs";

console.log(from([1, 2, 3]));

from([1, 2, 3]).subscribe((e) => console.log(e));

function pro1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 1, success: true });
    }, 2000);
  });
}

function pro2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 1, success: true });
    }, 3000);
  });
}

forkJoin({
  aa: from(pro1()),
  bb: from(pro2()),
}).subscribe((e) => console.log(e));
复制代码

利用刚刚的 from 辅助方法，我们可以模拟出两个不同的 observable 对象，并且将返回时间定为不同的，一个2秒一个3秒，那么在控制台里面就可以看到，到了3秒之后，控制台才统一输出了一个对象，其中就包含了我们需=设定好的 aa 和 bb ，这样子就能够做到将两个时间不同的请求，合并为一个一起返回。

辅助方法 fromEvent

将事件转化为可观察对象，当这个事件被触发的时候，这个事件对象会作为数据流发出

接下来到代码当中，我们去定义一个事件来做一下实验，最简单的最常见的事件，那就是浏览器的点击事件，我们在浏览器中定义一个按钮，并且为它设定好点击事件。

<button id="button">我是按钮</button>
复制代码

然后我们就可以用 fromEvent 方法，来将它的点击事件转化为 observable，为什么要转为 observable呢，因为这样我们就可以使用一些操作符来操作事件，比如之前提到过的 map 过滤数据事件，我们可以用它来过滤得到元素点击事件里面，event 的 target 属性，这个属性就代表着元素本身

这样我们能够用 observable 来获取点击事件并且通过数据流的方式流出来，这样就能够使用一些操作符来进行操作。

辅助方法 interval

每个一段时间发出一个数值，数值会持续递增

interval 辅助方法有点类似于 js 里的定时器，会每隔一段事件发布一次事件，并且每次发布事件传递进去的值将会递增。

import { interval } from "rxjs";

interval(1000).subscribe((e) => console.log(e));
复制代码

总结

本文介绍了4个不同的辅助方法以及一个简单的使用，这些辅助方法都是 rxjs 提供给我们的将代码中的各种不同的场景转换为可观察对象的方法，那么为什么要这么做呢，就是因为 rxjs 还提供了很多强大的操作符来给我们操作数据流流出来的数据，这些我们将会在下一次再来说到。

那么本文就是讲述了部分的辅助方法，下一次来说一些操作符方法，以及怎么在辅助方法中相互配合使用。