|
구독
누군가가 Observable 인스턴스를 구독하는 경우에만 값 게시가 시작됩니다. 구독할 때 먼저 관찰 가능한 객체의 subscribe() 메서드를 호출하고 이를 관찰자 객체에 전달하여 알림을 받아야 합니다. 다음과 같습니다: Observable 的实例时，它才会开始发布值。 订阅时要先调用可观察对象的 subscribe() 方法，并把一个观察者对象传给它，用来接收通知。如下：
为了展示订阅的原理，需要先创建新的可观察对象。它有一个构造函数可以用来创建新实例，但是为了更简明，也可以使用 Observable 上定义的一些静态方法来创建一些常用的简单可观察对象：
-
of(...items) ：返回一个 Observable 实例，它用同步的方式把参数中提供的这些值一个一个发送出来。
-
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() 方法时，这个构造函数就会把它接收到的参数作为订阅函数来运行。 订阅函数会接收一个 Observer 对象，并把值发布给观察者的 next()方法。
// 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('Finished sequence'); }
});运行结果如下：
上面一个例子演示了如何自定义订阅函数，那么既然可以自定义订阅者函数，我们就可以将异步代码封装进可观察对象的订阅者函数中，待异步代码执行完再发送数据。如下：
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操作符
我们可以使用一系列的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错误处理
RxJS 还提供了catchError
구독 원칙을 입증하려면 먼저 새로운 관찰 가능한 객체를 생성해야 합니다. 여기에는 새 인스턴스를 생성하는 데 사용할 수 있는 생성자가 있지만 더 간결하게 하기 위해 Observable에 정의된 일부 정적 메서드를 사용하여 일반적으로 사용되는 간단한 관찰 가능 개체를 생성할 수도 있습니다.
of(...items): 매개변수에 제공된 값을 one by one으로 보내는 Observable 인스턴스를 반환합니다. 동기 방식이 나옵니다. -
from(iterable) : 인수를 Observable 인스턴스로 변환합니다. 이 메서드는 일반적으로 배열을 관찰 가능한 개체(여러 값을 보내는)로 변환하는 데 사용됩니다.
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)
)실행 결과는 다음과 같습니다.
위 구독은 다음과 같이 직접 변경할 수 있습니다. 매개변수가 객체가 아닙니다rrreee구독자 함수
위 예에서 of() code> 메소드는 관찰 가능한 객체를 생성하는 데 사용됩니다. 이 섹션에서는 생성자를 사용하여 관찰 가능한 객체를 생성합니다. 🎜<blockquote>🎜<code>Observable 생성자는 모든 유형의 관찰 가능한 스트림을 생성할 수 있습니다. 관찰 가능한 객체의 subscribe() 메서드가 실행되면 이 생성자는 구독 함수로 수신하는 매개변수를 실행합니다. 구독 함수는 Observer 객체를 수신하고 해당 값을 관찰자의 next() 메서드에 게시합니다. 🎜rrreee🎜실행 결과는 다음과 같습니다. 🎜🎜🎜🎜🎜위의 예는 구독 기능을 사용자 정의하는 방법을 보여줍니다. 구독자 기능을 사용자 정의할 수 있으므로 관찰 가능한 객체의 구독자 함수에 비동기 코드를 캡슐화할 수 있습니다. , 데이터를 보내기 전에 비동기 코드가 실행될 때까지 기다리십시오. 다음과 같습니다: 🎜rrreee🎜Multicast🎜🎜https://angular.cn/guide/observables#multicasting🎜
🎜RxJS 연산자🎜🎜일련의 RxJS 연산자 code>를 사용할 수 있습니다. , 이러한 메시지가 수신자에 의해 수신되기 전에 일련의 처리 및 변환이 수행됩니다. 왜냐하면 이러한 연산자는 순수 함수이기 때문입니다. 🎜rrreee🎜위의 방법은 이해가 안되고 받아들이기 어렵습니다. 일반적으로 여러 연산자를 연결하기 위해 <code>pipe를 사용하여 다음과 같은 방법을 사용합니다.🎜rrreee🎜오류 처리🎜🎜RxJS 파이프라인에서 알려진 오류를 처리할 수 있는 catchError 연산자도 제공됩니다. 🎜 API 요청을 하고 서버에서 반환된 응답을 매핑하는 관찰 가능 개체가 있다고 가정해 보세요. 서버가 오류를 반환하거나 값이 존재하지 않으면 오류가 생성됩니다. 이 오류를 포착하고 기본값을 제공하면 스트림은 오류를 보고하지 않고 해당 값을 계속 처리합니다. 🎜rrreee🎜최종 실행 결과는 다음과 같습니다. 🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜
