JavaScript 및 RxJS를 사용한 반응형 프로그래밍-JS 튜토리얼-php.cn

JavaScript 및 RxJS를 사용한 반응형 프로그래밍

PHPz

풀어 주다： 2023-09-09 18:37:02

앞으로

1113명이 탐색했습니다.

使用 JavaScript 和 RxJS 进行响应式编程

반응형 프로그래밍은 비동기 데이터 흐름을 처리하는 프로그래밍 패러다임입니다. 이는 변경 사항에 더 빠르게 응답하고 이벤트와 데이터 흐름을 더 효율적으로 처리하는 코드를 작성하는 방법입니다.

리액티브 프로그래밍에서 데이터는 이벤트 스트림으로 표현됩니다. 이러한 이벤트는 사용자 입력부터 네트워크 요청, 데이터베이스 업데이트까지 무엇이든 될 수 있습니다. 그런 다음 프로그램은 이러한 이벤트를 구독하고 이벤트가 발생하면 반응합니다.

이 프로그래밍 방법에는 많은 장점이 있습니다. 첫째, 비동기 데이터 작업이 더 쉬워집니다. 기존 프로그래밍에서는 데이터를 언제 사용할 수 있는지 알기 어렵기 때문에 비동기 데이터를 처리하기 어려울 수 있습니다. 반면에 반응형 프로그래밍은 비동기 데이터를 이벤트 스트림으로 처리하여 보다 자연스러운 방식으로 처리합니다.

두 번째로 반응형 프로그래밍은 코드 성능을 향상시키는 데 도움이 됩니다. 이벤트를 구독하면 새 데이터가 제공되는 즉시 코드에 알림이 전달되므로 데이터를 폴링하거나 이벤트가 발생할 때까지 기다릴 필요가 없습니다.

마지막으로 반응형 프로그래밍은 코드의 유지 관리를 더 쉽게 만드는 데 도움이 될 수 있습니다. 데이터를 이벤트 스트림으로 처리하면 코드가 더욱 선언적으로 변하고 코드의 다양한 부분이 서로 상호 작용하는 방식을 더 쉽게 이해할 수 있습니다.

RxJS

RxJS는 반응형 프로그래밍 API를 제공하는 JavaScript 라이브러리입니다. Angular 및 React와 같은 널리 사용되는 JavaScript 프레임워크에서 사용되는 인기 있는 라이브러리입니다.

RxJS는 반응형 프로그래밍에 이상적인 많은 기능을 제공합니다. 이러한 기능에는 다음이 포함됩니다 -

Observables− Observable은 RxJS의 기본 구성 요소입니다. 이는 이벤트 스트림을 나타내며 숫자, 문자열, 개체 및 배열을 포함한 모든 유형의 데이터를 나타내는 데 사용할 수 있습니다.
Operators− 연산자는 Observable을 변환, 필터링 및 결합하는 데 사용할 수 있는 함수입니다. RxJS에는 Observable로 다양한 작업을 수행할 수 있는 연산자가 많이 있습니다.
Scheduler− 스케줄러는 Observable의 타이밍을 제어하는 데 사용됩니다. Observable이 특정 시간에 실행되도록 하거나 이벤트 방출을 지연시키는 데 사용할 수 있습니다.

RxJS 설치

RxJS를 사용하려면 RxJS를 설치해야 합니다. 터미널을 열고 다음 명령을 실행하세요 -

으아악

설치가 완료되면 RxJS 반응형 프로그래밍의 기능을 탐색할 수 있습니다.

관측 가능 항목 만들기

Observable은 RxJS의 핵심입니다. 이는 구독자가 관찰할 수 있는 데이터 스트림을 나타냅니다.

일련의 숫자를 내보내는 간단한 Observable을 만드는 것부터 시작해 보겠습니다. -

Example

으아악

지침

위 코드에서는 RxJS의 Observable 클래스를 사용하여 Observable을 생성합니다. 생성자 내에서 값을 내보내는 논리를 정의합니다. 이 예에서는 setInterval을 사용하여 매초마다 숫자를 내보냅니다. 개수가 5에 도달하면 간격을 중지하고 관찰자.완전()을 호출하여 스트림의 끝을 알립니다.

Observable에서 방출된 값을 관찰하기 위해 구독 메소드를 호출하고 콜백 함수를 제공합니다. 이 경우 콜백 함수는 단순히 내보낸 숫자를 콘솔에 기록합니다.

출력

으아악

RxJS의 연산자

RxJS는 Observable에서 방출된 데이터를 변환, 필터링, 결합 및 조작할 수 있는 광범위한 연산자를 제공합니다. 몇 가지 일반적인 연산자를 살펴보겠습니다.

지도 운영자

map 연산자를 사용하면 Observable에서 방출되는 값을 변환할 수 있습니다. 예를 들어 이전 예제를 수정하여 방출된 숫자를 두 배로 만들어 보겠습니다. -

Example

으아악

지침

이 코드에서는 파이프라인 메서드를 사용하여 매핑 연산자를 Observable에 연결합니다. 매핑 연산자는 방출된 각 숫자를 두 배로 변환하는 콜백 함수를 사용합니다. 그런 다음 결과 값이 구독자의 콜백 함수에 전달됩니다.

출력

으아악

필터 연산자

필터 연산자를 사용하면 조건에 따라 Observable이 방출하는 값을 선택적으로 필터링할 수 있습니다. 이전 예시에 짝수만 내보내도록 필터를 추가해 보겠습니다. -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

로그인 후 복사

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。