Analisis ringkas objek yang boleh diperhatikan, pemerhati dan pengendali RxJS dalam Angular

Artikel ini akan memperkenalkan anda kepada objek yang boleh diperhatikan (Boleh diperhatikan), pemerhati (pemerhati) dan operator RxJS dalam Angular Saya harap ia akan membantu anda!

Boleh diperhatikan (observable object)

Observable (observable object) ialah objek dalam pustaka RxJS dan boleh digunakan untuk memproses peristiwa Asynchronous , seperti permintaan HTTP (sebenarnya, dalam Angular, semua permintaan HTTP kembali Dapat Diperhatikan). [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Mungkin, anda pernah bersentuhan dengan sesuatu yang dipanggil promise pada dasarnya adalah sama: kedua-dua pengeluar mengambil inisiatif untuk menyediakan perkhidmatan kepada pengguna. Atau "tolak" produk, sementara pengguna menerimanya secara pasif, tetapi terdapat perbezaan besar di antara mereka: Observable boleh menghantar sebarang bilangan nilai, dan ia tidak akan dilaksanakan sehingga ia dilanggan ! Ini ialah ciri yang promise tiada.

• Observable digunakan untuk menghantar mesej antara pengirim dan penerima Anda boleh menganggap mesej ini sebagai strim
• Apabila mencipta objek Observable, anda perlu lulus. Masukkan fungsi sebagai parameter pembina Fungsi ini dipanggil Fungsi pelanggan Fungsi ini adalah tempat pengeluar menolak mesej kepada pengguna
• diproses oleh pengguna subscribe (. subscribe ), fungsi pelanggan tidak akan dilaksanakan sehingga fungsi subscribe() dipanggil, yang mengembalikan objek subscription dengan fungsi unsubscribe() di dalamnya. Pengguna boleh menolak untuk menerima mesej pada bila-bila masa! Fungsi
• subscribe() menerima objek observer（观察者） sebagai parameter input
• Mesej boleh dihantar secara serentak atau tak segerak

pemerhati (Pengarang pemerhatian)

Dengan 可观察对象（发送方）, anda memerlukan 观察者（接收方） untuk memerhati objek yang boleh diperhatikan Pemerhati mesti melaksanakan antara muka observer, iaitu objek yang mengandungi tiga sifat, yang kesemuanya adalah fungsi :

通知类型	说明
next	必要。以接收的值作为入参，在正常情况下执行。可能执行零次或多次。
error	可选。出错的情况下执行。错误会中断这个可观察对象实例的执行过程。
complete	可选。传输完成的情况下执行。

Langgan

Hanya apabila seseorang melanggan tika Observable ia akan mula menerbitkan nilai. Apabila melanggan, anda mesti terlebih dahulu memanggil kaedah subscribe() bagi objek yang boleh diperhatikan dan menghantar objek pemerhati kepadanya untuk menerima pemberitahuan. Seperti berikut:

Untuk menunjukkan prinsip langganan, objek boleh diperhatikan baharu perlu dibuat terlebih dahulu. Ia mempunyai pembina yang boleh digunakan untuk mencipta kejadian baharu, tetapi untuk menjadi lebih ringkas, anda juga boleh menggunakan beberapa kaedah statik yang ditakrifkan pada Observable untuk mencipta beberapa pemerhatian mudah yang biasa digunakan:

• of(...items): Mengembalikan contoh Observable, yang menghantar nilai 一个一个 yang disediakan dalam parameter secara serentak.
• from(iterable) : Menukar hujahnya kepada contoh Observable. Kaedah ini biasanya digunakan untuk menukar tatasusunan kepada objek yang boleh diperhatikan (yang menghantar berbilang nilai).

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

Hasil larian adalah seperti berikut:

Langganan di atas boleh ditukar terus kepada yang berikut: Parameter bukan objek

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

Fungsi pelanggan

Dalam contoh di atas, kaedah of() digunakan untuk mencipta objek boleh diperhatikan Bahagian ini menggunakan pembina untuk mencipta objek boleh diperhatikan.

Observable Pembina boleh mencipta sebarang jenis strim yang boleh diperhatikan. Apabila kaedah subscribe() yang boleh diperhatikan dilaksanakan, pembina ini akan menjalankan parameter yang diterimanya sebagai 订阅函数. Fungsi langganan akan menerima objek Observer dan menerbitkan nilai kepada kaedah next() pemerhati.

// 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;); }
});

Keputusan yang dijalankan adalah seperti berikut:

Contoh di atas menunjukkan cara menyesuaikan fungsi langganan, jadi sejak ia boleh disesuaikan fungsi Pelanggan, kita boleh merangkumkan kod tak segerak ke dalam fungsi pelanggan objek boleh diperhatikan, dan kemudian menghantar data selepas kod tak segerak dilaksanakan. Seperti berikut:

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

Multicasting

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

RxJS Operator

Kita boleh menggunakan satu siri RxJS操作符 untuk melakukan satu siri pemprosesan dan penukaran pada mesej ini sebelum ia diterima oleh penerima, kerana pengendali ini adalah fungsi tulen.

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

Saya tidak faham kaedah di atas dan sukar untuk menerimanya Secara amnya, kaedah berikut biasanya digunakan, menggunakan pipe untuk memautkan berbilang operator

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

Ralat pengendalian

juga menyediakan operator RxJS, yang membolehkan anda mengendalikan ralat yang diketahui dalam saluran paip. catchError Katakan anda mempunyai pemerhatian yang membuat permintaan API dan kemudian memetakan respons yang dikembalikan oleh pelayan. Jika pelayan mengembalikan ralat atau nilai tidak wujud, ralat akan dihasilkan. Jika anda menangkap ralat ini dan memberikan nilai lalai, strim akan terus memproses nilai tersebut tanpa melaporkan ralat. Seperti berikut:

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

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('抛出错误');
        }
    }),
    // 3、此处捕获错误并处理错误，对外发送数据 0
    catchError((err) => {
        console.log(err)
        return of(0)
    })
)
.subscribe(
    data => console.log(data),
    // 4、由于上面抛出的错误被 catchError 操作符处理（重新发送数据）了，所以这里能顺利订阅到数据而不报错
    err => console.log('接受不到数据：', err)
)

Hasil larian akhir adalah seperti berikut:

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:

Video Pengaturcaraan ! !

Atas ialah kandungan terperinci Analisis ringkas objek yang boleh diperhatikan, pemerhati dan pengendali RxJS dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!