Agular 中的 RxJS 之 辅助方法

语言: CN / TW / HK

theme: channing-cyan

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

前言

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

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

辅助方法 from

将 Array、Promise、Iterator 转为 observable 对象

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

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

image.png

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

```js import { from } from "rxjs";

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

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

image.png

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

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

```js 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)); ```

image.png

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

辅助方法 forkJoin

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

image.png

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

```js 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 ,这样子就能够做到将两个时间不同的请求,合并为一个一起返回。

image.png

辅助方法 fromEvent

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

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

js <button id="button">我是按钮</button>

image.png

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

image.png

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

辅助方法 interval

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

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

image.png

```js import { interval } from "rxjs";

interval(1000).subscribe((e) => console.log(e)); ```

image.png

总结

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

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