Angular의 관찰 가능한 객체, 관찰자 및 RxJS 연산자에 대한 간략한 분석-JS 튜토리얼-php.cn

이 글은Angular의 Observable, Observer 및 RxJS 연산자를 소개합니다.

Angular의 관찰 가능한 객체, 관찰자 및 RxJS 연산자에 대한 간략한 분석

Observable(관찰 가능 개체)

Observable(관찰 가능 개체)은RxJS라이브러리의 개체로, 다음과 같은 비동기 이벤트를 처리하는 데 사용할 수 있습니다. HTTP 요청(실제로 Angular에서는 모든 HTTP 요청이 Observable을 반환합니다). [관련 튜토리얼 추천: "Observable(可观察对象)，是RxJS库里面的一个对象，可以用来处理异步事件，例如HTTP请求（实际上，在Angular中，所有的HTTP请求返回的都是Observable）。【相关教程推荐：《angular教程》】

或许，你以前接触过一个叫promise的东西，它们本质上面是相同的：都是生产者主动向消费者“push”产品，而消费者是被动接收的，但是他们两者还是有很大区别的：Observable可以发送任意多值，并且，在被订阅之前，它是不会执行的！这是promise不具备的特点。

Observable用于在发送方和接收方之间传输消息，你可以将这些消息看成是流
在创建Observable对象时，需要传入一个函数作为构造函数的参数，这个函数叫订阅者函数，这个函数也就是生产者向消费者推送消息的地方
在被消费者subscribe（订阅）之前，订阅者函数不会被执行，直到subscribe()函数被调用，该函数返回一个subscription对象，里面有一个unsubscribe()函数，消费者可以随时拒绝消息的接收！
subscribe()函数接收一个observer（观察者）对象作为入参
消息的发送可以是同步的，也可以是异步的

observer（观察者）

有了可观察对象（发送方），就需要一个观察者（接收方）来观察可观察对象，观察者要实现observerangular tutorial

"] promise Observable은 원하는 수의 값을 보낼 수 있지만 실행되지는 않습니다 promise

Observable은 발신자와 수신자 간에 메시지를 전송하는 데 사용됩니다.Observable를 생성할 때 이러한 메시지를 스트림으로 간주할 수 있습니다. > 객체의 경우 생성자의 매개변수로 함수를 전달해야 합니다. 이 함수를구독자 함수라고 합니다. 이 함수는 생산자가 소비자에게 메시지를 푸시하는 위치입니다.

subscribe

subscribe()

subscription

unsubscribe()

subscribe()함수는observer개체를 입력 매개변수로 받습니다.
메시지 전송은 동기식일 수 있습니다. 비동기식일 수 있습니다.

누군가가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) { 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'); } });

로그인 후 복사

运行结果如下：

Angular의 관찰 가능한 객체, 관찰자 및 RxJS 연산자에 대한 간략한 분석

上面一个例子演示了如何自定义订阅函数，那么既然可以自定义订阅者函数，我们就可以将异步代码封装进可观察对象的订阅者函数中，待异步代码执行完再发送数据。如下：

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

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

로그인 후 복사

실행 결과는 다음과 같습니다.

Angular의 관찰 가능한 객체, 관찰자 및 RxJS 연산자에 대한 간략한 분석

rrreee구독자 함수

of() code> 메소드는 관찰 가능한 객체를 생성하는 데 사용됩니다. 이 섹션에서는 생성자를 사용하여 관찰 가능한 객체를 생성합니다. Observable
       subscribe()
       구독 함수
       Observer
       next()
       
       관찰 가능한 객체의 구독자 함수에 비동기 코드를 캡슐화
       
        https://angular.cn/guide/observables#multicasting
       
       RxJS 연산자 code>를 사용할 수 있습니다. , 이러한 메시지가 수신자에 의해 수신되기 전에 일련의 처리 및 변환이 수행됩니다. 왜냐하면 이러한 연산자는 순수 함수이기 때문입니다. rrreee위의 방법은 이해가 안되고 받아들이기 어렵습니다. 일반적으로 여러 연산자를 연결하기 위해 pipe
       RxJS
       catchError
       
         아마도라는 것을 접하셨을 것입니다. 둘 다 본질적으로 동일합니다. 두 생산자는 적극적으로 소비자에게 "제품을 푸시"하지만, 소비자는 이를 수동적으로 수신하지만 여전히 큰 차이가 있습니다.!에는 없는 기능입니다.
         다음
         필요합니다. 수신된 값을 입력 매개변수로 사용하여 정상적인 상황에서 실행합니다. 0회 이상 실행될 수 있습니다.
        error
          선택사항. 오류가 발생한 경우 실행됩니다. 오류로 인해 관찰 가능한 객체 인스턴스의 실행이 중단됩니다.
         완료
          선택사항. 전송이 완료되면 실행됩니다.
         
           
구독 원칙을 입증하려면 먼저 새로운 관찰 가능한 객체를 생성해야 합니다. 여기에는 새 인스턴스를 생성하는 데 사용할 수 있는 생성자가 있지만 더 간결하게 하기 위해
           Observable에 정의된 일부 정적 메서드를 사용하여 일반적으로 사용되는 간단한 관찰 가능 개체를 생성할 수도 있습니다.
           
           
            < li >
            of(...items): 매개변수에 제공된 값을
            one by one으로 보내는
            Observable인스턴스를 반환합니다. 동기 방식이 나옵니다.
            from(iterable): 인수를Observable인스턴스로 변환합니다. 이 메서드는 일반적으로 배열을 관찰 가능한 개체(여러 값을 보내는)로 변환하는 데 사용됩니다.
           
          위 구독은 다음과 같이 직접 변경할 수 있습니다. 매개변수가 객체가 아닙니다위 예에서생성자는 모든 유형의 관찰 가능한 스트림을 생성할 수 있습니다. 관찰 가능한 객체의메서드가 실행되면 이 생성자는로 수신하는 매개변수를 실행합니다. 구독 함수는객체를 수신하고 해당 값을 관찰자의메서드에 게시합니다.rrreee실행 결과는 다음과 같습니다.위의 예는 구독 기능을 사용자 정의하는 방법을 보여줍니다. 구독자 기능을 사용자 정의할 수 있으므로할 수 있습니다. , 데이터를 보내기 전에 비동기 코드가 실행될 때까지 기다리십시오. 다음과 같습니다: rrreeeMulticastRxJS 연산자일련의를 사용하여 다음과 같은 방법을 사용합니다.rrreee오류 처리파이프라인에서 알려진 오류를 처리할 수 있는연산자도 제공됩니다. API 요청을 하고 서버에서 반환된 응답을 매핑하는 관찰 가능 개체가 있다고 가정해 보세요. 서버가 오류를 반환하거나 값이 존재하지 않으면 오류가 생성됩니다. 이 오류를 포착하고 기본값을 제공하면 스트림은 오류를 보고하지 않고 해당 값을 계속 처리합니다. rrreee최종 실행 결과는 다음과 같습니다. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
         
        
          관찰자(관찰자)
          관찰 가능한 객체(송신자)를 사용하면 관찰하려면관찰자(수신자) )가 필요합니다. 관찰 가능한 객체는observer인터페이스를 구현해야 하며 다음과 같은 세 가지 속성을 포함합니다.
        

         
          
         
          
         
          
          
        
       
       위 내용은 Angular의 관찰 가능한 객체, 관찰자 및 RxJS 연산자에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!