AgularでのRxJSのヘルパーメソッド

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して2日目です。クリックしてイベントの詳細をご覧ください。

序文

ちなみに、RxJSのデータフローと演算子を紹介する前に、データフローと演算子を紹介する2つの例を示しましたが、データフローの知識を深めるために、より一般的に使用される補助的な方法をいくつか紹介します。と演算子、および実用化。

この記事では、主に4つの補助的な方法を紹介し、いくつかの簡単な例を示します。補助的な方法は、主に私たちの日常の一般的な揚子江の一部を観測可能なオブジェクトに変換することです。

からのヘルパーメソッド

Array、Promise、Iteratorを監視可能なオブジェクトに変換します

前回データフローについてお話しましたが、これは補助方式もデータフロー方式です。データフローの定義は、観測対象から流れるデータをデータフローと呼び、観測対象は継続的に外部にデータを出力することができます。

次に、fromメソッドは上記の3つを監視可能なオブジェクトに変換し、サブスクライブすることでデータをそこから流出させることができます。

次に、実際のコードでこのヘルパーメソッドを見てみましょう。

import { from } from "rxjs";

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

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

fromメソッドがオブザーバブルを返し、サブスクライブした後、配列内の3つの要素がフローアウトされることがわかります。

次に、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

値は一定期間ごとに発行され、値は増加し続けます

インターバルヘルパーメソッドは、jsのタイマーにいくぶん似ています。イベントを1つおきに公開し、イベントが公開されるたびに渡される値がインクリメントされます。

import { interval } from "rxjs";

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

要約する

この記事では、4つの異なるヘルパーメソッドと使用する簡単なメソッドを紹介します。これらのヘルパーメソッドはすべて、コード内のさまざまなシーンを監視可能なオブジェクトに変換するためにrxjsによって提供されるメソッドです。これを行う理由は、rxjsにも多くの強力な演算子があるためです。データストリームから流出するデータを操作するために、これについては次回説明します。

そこで、この記事ではいくつかのヘルパーメソッドについて説明します。次回は、いくつかの演算子メソッドと、ヘルパーメソッドでそれらを組み合わせて使用する方法について説明します。