Subscription
誰かが Observable のインスタンスをサブスクライブした場合にのみ、値の公開が開始されます。サブスクライブするときは、まず監視可能なオブジェクトの subscribe() メソッドを呼び出し、通知を受信するオブザーバー オブジェクトに渡す必要があります。次のとおりです:
サブスクリプションの原理を実証するには、最初に新しい監視可能なオブジェクトを作成する必要があります。新しいインスタンスの作成に使用できるコンストラクターがありますが、より簡潔に言うと、Observable で定義されたいくつかの静的メソッドを使用して、一般的に使用される単純な監視可能なオブジェクトを作成することもできます。
of(...items)- :
Observable インスタンスを返します。これは、パラメーターで指定された値 を 1 つずつ同期で送信します。やり方。 : 引数を - 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<number>) {
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(&#39;Finished sequence&#39;); }
});</pre>実行結果は次のとおりです:
上記の例は、サブスクリプション関数をカスタマイズする方法を示しています。サブスクライバ関数をカスタマイズすると、非同期コードを監視可能なオブジェクトのサブスクライバ関数にカプセル化できます
、非同期コードの実行後にデータを送信できます。次のように: 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
##これらの演算子はすべて純粋関数であるため、一連の
RxJS 演算子 を使用して、受信者が受信する前にこれらのメッセージに対して一連の処理と変換を実行できます。
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エラー処理
は、パイプライン内の既知のエラーを処理できる catchError
演算子も提供します。 API リクエストを作成し、サーバーから返されたレスポンスをマップするオブザーバブルがあるとします。サーバーがエラーを返した場合、または値が存在しない場合は、エラーが生成されます。このエラーをキャッチしてデフォルト値を指定すると、ストリームはエラーを報告せずにそれらの値の処理を続行します。次のとおりです: <pre class='brush:php;toolbar:false;'>import { map, Observable, filter, catchError, of } from &#39;rxjs&#39;
const observable = new Observable((x) => {
x.next(1) // 发送数据 1 和 2
x.next(2)
}).pipe(
map(value => {
if (value === 1) { // 1、当发送的数据为 1 时，将其乘以 100
return value*100
} else { // 2、否则抛出错误
throw new Error(&#39;抛出错误&#39;);
}
}),
// 3、此处捕获错误并处理错误，对外发送数据 0
catchError((err) => {
console.log(err)
return of(0)
})
)
.subscribe(
data => console.log(data),
// 4、由于上面抛出的错误被 catchError 操作符处理（重新发送数据）了，所以这里能顺利订阅到数据而不报错
err => console.log(&#39;接受不到数据：&#39;, err)
)</pre>最終的な実行結果は次のとおりです:
プログラミング関連の知識の詳細については、次を参照してください:
プログラミング ビデオ! ！
サブスクライバ関数
非同期コードを監視可能なオブジェクトのサブスクライバ関数にカプセル化できます