検索
ホームページウェブフロントエンドjsチュートリアルAngular での監視可能なオブジェクト、オブザーバー、RxJS オペレーターの簡単な分析

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

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

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

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

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

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

観測可能なオブジェクト (送信者)

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

Notification Type説明次##必須。受け取った値を入力パラメータとして使用し、通常の状況で実行します。 0 回以上実行される可能性があります。 #完全オプション。転送完了時に実行されます。

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()

メソッドが使用されています。このセクションではコンストラクタを使用してオブジェクトを作成します。観測可能なオブジェクト。

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

subscribe() メソッドが実行されると、このコンストラクターは、受信したパラメーターを subscription 関数 として実行します。サブスクリプション関数は Observer オブジェクトを受け取り、その値をオブザーバーの next() メソッドにパブリッシュします。 <pre class='brush:php;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>実行結果は次のとおりです:


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

、非同期コードの実行後にデータを送信できます。次のように:

import { Observable } from &#39;rxjs&#39;
// 异步函数
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

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

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

import { of } from &#39;rxjs&#39;;
import { map } from &#39;rxjs/operators&#39;;
// 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 &#39;rxjs&#39;

// 创建可观察对象,并传入订阅者函数
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 リクエストを作成し、サーバーから返されたレスポンスをマップするオブザーバブルがあるとします。サーバーがエラーを返した場合、または値が存在しない場合は、エラーが生成されます。このエラーをキャッチしてデフォルト値を指定すると、ストリームはエラーを報告せずにそれらの値の処理を続行します。次のとおりです: <pre class='brush:php;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>最終的な実行結果は次のとおりです:

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

プログラミング ビデオ

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

#エラー オプション。エラーが発生した場合に実行されます。エラーが発生すると、この監視可能なオブジェクト インスタンスの実行が中断されます。

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

声明
この記事はcsdnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境