Angular での監視可能なオブジェクト、オブザーバー、RxJS オペレーターの簡単な分析

この記事では、Angular における監視可能なオブジェクト (Observable)、オブザーバー (observer)、および RxJS オペレーターについて紹介します。

Observable (観察可能なオブジェクト)

Observable (観察可能なオブジェクト) は RxJS ライブラリ内にあります オブジェクトこれを使用して、HTTP リクエストなどの非同期イベントを処理できます (実際、Angular では、すべての HTTP リクエストは Observable を返します)。 [推奨チュートリアル: "angular チュートリアル"]

おそらく、これまでに promise と呼ばれるものに触れたことがあるでしょう。これらは本質的に同じです。それらはすべて生成されています。オペレーターは積極的に製品を消費者に「プッシュ」し、消費者は受動的に製品を受け取りますが、両者の間には依然として大きな違いがあります。Observable は任意の数の値を送信でき、サブスクライブされた後は、 は実行されません!これは promise にはない機能です。

• Observable は、送信者と受信者の間でメッセージを送信するために使用されます。これらのメッセージはストリームとみなすことができます。
• Observable を作成するときは、これらのメッセージをストリームとみなすことができます。オブジェクトを作成するには、コンストラクターのパラメーターとして関数を渡す必要があります。この関数は サブスクライバー関数 と呼ばれます。この関数は、プロデューサーがコンシューマーにメッセージをプッシュする場所です。
• になる前に #コンシューマによって ##subscribe (サブスクライブ) された場合、サブスクライバ関数は、subscribe() 関数が呼び出されるまで実行されません。この関数は、subscription オブジェクトを返します。 unsubscribe() 関数が内部に組み込まれており、消費者はいつでもメッセージの受信を拒否できます。
• subscribe()関数は、入力パラメータとして observer(observer) オブジェクトを受け取ります
メッセージの送信は同期または非同期で行うことができます。

を使用するには、観測可能なオブジェクトを観測するには 観測者 (受信者) が必要です。の場合、オブザーバーは observer インターフェイスを実装する必要があります。これは、次のような 3 つのプロパティ (すべて関数) を含むオブジェクトです。

Subscription

誰かが Observable のインスタンスをサブスクライブした場合にのみ、値の公開が開始されます。サブスクライブするときは、まず監視可能なオブジェクトの subscribe() メソッドを呼び出し、通知を受信するオブザーバー オブジェクトに渡す必要があります。次のとおりです:

サブスクリプションの原理を実証するには、最初に新しい監視可能なオブジェクトを作成する必要があります。新しいインスタンスの作成に使用できるコンストラクターがありますが、より簡潔に言うと、Observable で定義されたいくつかの静的メソッドを使用して、一般的に使用される単純な監視可能なオブジェクトを作成することもできます。

of(...items)
• : Observable インスタンスを返します。これは、パラメーターで指定された値 を 1 つずつ同期で送信します。やり方。 from(iterable)
: 引数を
• Observable インスタンスに変換します。このメソッドは通常、配列を監視可能なオブジェクト (複数の値を送信する) に変換するために使用されます。

  import { of } from "rxjs";
  // 1、通过 of() 方法返回一个可观察对象，并准备将1，2，3三个数据发送出去
  const observable = of(1, 2, 3);	
  // 2、实现 observer 接口，观察者
  const observer = {	
  	next: (num: number) => console.log(num),
  	error: (err: Error) => console.error('Observer got an error: ' + err),
    	complete: () => console.log('Observer got a complete notification'), 
  }
  // 3、订阅。调用可观察对象的 subscribe() 方法订阅，subscribe() 方法中传入的对象就是一个观察者
  observable.subscribe(observer);

  ログイン後にコピー
実行結果は次のとおりです。

observable.subscribe(
  num => console.log(num),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

of()

コンストラクターは、任意のタイプの監視可能なストリームを作成できます。監視可能なオブジェクトの

subscribe() メソッドが実行されると、このコンストラクターは、受信したパラメーターを subscription 関数 として実行します。サブスクリプション関数は Observer オブジェクトを受け取り、その値をオブザーバーの next() メソッドにパブリッシュします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 1、自定义订阅者函数 function sequenceSubscriber(observer: Observer&lt;number&gt;) { observer.next(1); // 发送数据 observer.next(2); // 发送数据 observer.next(3); // 发送数据 observer.complete(); return {unsubscribe() {}}; } // 2、通过构造函数创建一个新的可观察对象，参数就是一个订阅者函数 const sequence = new Observable(sequenceSubscriber); // 3、订阅 sequence.subscribe({ next(num) { console.log(num); }, // 接受数据 complete() { console.log(&amp;#39;Finished sequence&amp;#39;); } });</pre><div class="contentsignin">ログイン後にコピー</div></div>実行結果は次のとおりです:

上記の例は、サブスクリプション関数をカスタマイズする方法を示しています。サブスクライバ関数をカスタマイズすると、非同期コードを監視可能なオブジェクトのサブスクライバ関数にカプセル化できます

import { Observable } from 'rxjs'
// 异步函数
function fn(num) {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            num++
            reslove(num)
        }, 1000)
    })
}
// 创建可观察对象，并传入订阅者函数
const observable = new Observable((x) => {
    let num = 1
    fn(num).then(
    	res => x.next(res)	// 异步代码执行完成，发送数据
    ) 
})
// 订阅，接收数据，可以改为链式调用
observable.subscribe(data => console.log(data))	// 2

https://angular.cn/guide/observables#multicasting

RxJS Operator

##これらの演算子はすべて純粋関数であるため、一連の

を使用して、受信者が受信する前にこれらのメッセージに対して一連の処理と変換を実行できます。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// 1、创建可观察对象，并发送数据
const nums = of(1, 2, 3);
// 2、创建函数以接受可观察对象
const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);

squaredNums.subscribe(x => console.log(x));

上記の方法は理解できず、受け入れるのが難しいです。一般的には、次の方法がよく使われます。複数の演算子をリンクするには、pipe を使用します。

import { map, Observable, filter } from 'rxjs'

// 创建可观察对象，并传入订阅者函数
const observable = new Observable((x) => {
    x.next(1)
    x.next(2)
    x.next(3)
    x.next(4)
}).pipe(
    map(value => value*100),		// 操作符
    filter(value => value == 200)	// 操作符
)
.subscribe(data => console.log(data))	// 200

エラー処理#RxJS

catchError

API リクエストを作成し、サーバーから返されたレスポンスをマップするオブザーバブルがあるとします。サーバーがエラーを返した場合、または値が存在しない場合は、エラーが生成されます。このエラーをキャッチしてデフォルト値を指定すると、ストリームはエラーを報告せずにそれらの値の処理を続行します。次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { map, Observable, filter, catchError, of } from &amp;#39;rxjs&amp;#39; const observable = new Observable((x) =&gt; { x.next(1) // 发送数据 1 和 2 x.next(2) }).pipe( map(value =&gt; { if (value === 1) { // 1、当发送的数据为 1 时，将其乘以 100 return value*100 } else { // 2、否则抛出错误 throw new Error(&amp;#39;抛出错误&amp;#39;); } }), // 3、此处捕获错误并处理错误，对外发送数据 0 catchError((err) =&gt; { console.log(err) return of(0) }) ) .subscribe( data =&gt; console.log(data), // 4、由于上面抛出的错误被 catchError 操作符处理（重新发送数据）了，所以这里能顺利订阅到数据而不报错 err =&gt; console.log(&amp;#39;接受不到数据：&amp;#39;, err) )</pre><div class="contentsignin">ログイン後にコピー</div></div>最終的な実行結果は次のとおりです: <code>

プログラミング関連の知識の詳細については、次を参照してください:

! ！

以上がAngular での監視可能なオブジェクト、オブザーバー、RxJS オペレーターの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。