10 예제와 함께 알아야 할 RXJS 기능

이 기사는 Florian Rappl과 Moritz Kröger가 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들어 주신 Sitepoint의 모든 동료 검토 자에게 감사드립니다!

FRP (Functional Reactive Programming)에 대한 관심이 커짐에 따라 RXJS는이 패러다임에서 가장 인기있는 JavaScript 라이브러리 중 하나가되었습니다. 이 기사에서는 RXJ의 상위 10 개 필수 알고 기능을 탐색 할 것입니다.

참고 :이 기사에서는 "RXJ와의 기능적 반응 프로그래밍으로 시작하는"기사에 설명 된 바와 같이 RXJ의 기본에 익숙하다고 가정합니다.

키 포인트

rxjs는 시간이 지남에 따라 채워진 배열과 유사한 관측 가능한 객체를 활용하여 기능적 반응성 프로그래밍 (FRP)을 용이하게하여 응용 프로그램에서 더 선언적이고 강력한 오류 처리가 가능합니다.

RXJ에서 간단한 스트림의 핵심 조작, 예 : , , 및 , 미러 배열 작업은 시간이 지남에 따라 값을 방출하는 숫자 스트림에 적용됩니다.

및

및

와 같은 특수 함수는 복잡한 데이터 구조를 처리하고 여러 스트림을 개별적으로 관리하는 데 중요하므로 고급 응답 프로그래밍 작업에 중요합니다.

예를 들어 , 및
• 와 같은 연산자는 여러 스트림을 효과적으로 결합하는 데 사용될 수 있으며, 각 스트림은 스트림 관리 및 데이터 동기화에서 다른 역할을합니다.
• 기능은 구독 취소 외부 조건에 기초한 메커니즘을 제공하며, 이는 흐름 제어 및 자원 관리에서 RXJ의 유연성을 보여줍니다. map() filter() 반응성 프로그래밍 반응성 프로그래밍은 관측 가능한 객체라는 데이터 스트림을 기본 프로그래밍 장치로 취하는 프로그래밍 패러다임입니다. reduce() 스트림 - 또는 RXJS 전문 용어의 관찰 가능한 객체 - 같은 이벤트 청취자 : 무언가가 일어날 때까지 기다렸다가 발생할 때 알려줍니다. OnClick 리스너로부터 얻은 일련의 비동기 알림은 데이터 흐름의 완벽한 예입니다. take() 다시 말해서, 관찰 가능한 물체는 시간이 지남에 따라 채워진 배열에 지나지 않습니다.
이 배열의 요소는 파일 시스템, DOM 이벤트, API 호출 및 배열과 같은 변환 된 동기 데이터와 같은 거의 모든 곳에서 나올 수 있습니다. 기본적으로 반응성 프로그래밍은 관찰 가능한 객체를 프로그램의 빌딩 블록으로 사용하는 것 이상입니다.
• 배열 flatMap()와의 관계 배열은 명시 적으로 변경되지 않는 한 콘텐츠가 최종적이기 때문에 간단합니다. 이런 의미에서 배열에는 필수 시간이 없습니다. switch() 반면에 관찰 가능한 물체는 시간별로 정의됩니다. 최대 당신은 스트림이 지금까지 받았다는 것을 알 수 있습니다 [1, 2, 3]. 당신은 당신이 당신이 4를 얻을 것인지 확신 할 수 없습니다.
스트림과 배열 사이의 관계는 너무 심오하여 대부분의 반응성 확장은 목록 작업이 핵심 인 기능 프로그래밍 세계에서 비롯됩니다.
• rxjs 일반적인 할 일 앱을 고려하십시오. rxjs를 사용하여 사용자의 미완성 된 작업의 이름을 표시하는 방법에 대한 질문을 보자.

  지금까지 이것은 배열 확장 일 뿐이지 만 반응 형 프로그래밍의 기능적 스타일을 보여줍니다.

  선언적 특성은 "실제 세계"기능을 더 복잡하게함으로써 명확 해집니다. 우리가 원한다고 가정 해 봅시다 :

  완료된 또는 미완성 작업을 볼 수있는 사용자의 선택에 따라 요청을 시작합니다 사용자가 선택을 신속하게 변경할 때 대역폭을 피하기 위해 마지막 선택에 한 번만 보냅니다 최대 3 개의 실패한 요청을 다시 시도하고

  서버가 마지막 시간과 다른 응답을 보내는 경우에만 뷰를 다시 반환합니다.

  const task_stream =
    // 创建所有数据库中任务的流
    getTasks().
      // 只获取此用户的任务
      filter((task) => task.user_id == user_id).
      // 获取未完成的任务
      filter((task) => !task.completed).
      // 只获取任务名称
      map((task) => task.name)
  
  /* 任务如下所示：
     task = {
      user_id   : number,
      completed : boolean,
      name      : string
     }
   */

  계산 분해 :

  parameter_stream은 사용자가 완성 된 작업 또는 미완성 작업을 원하고 매개 변수에 선택을 저장하는지 알려줍니다 debounce () 초당 마지막 버튼에만 초점을 맞추십시오 GetTasks () 주변의 부분은 이전과 동일합니다 ConstruntilChanged ()는 마지막 시간과 다르게 서버의 응답을 따릅니다 update ()는 서버에서 얻은 내용을 반영하기 위해 UI를 업데이트 할 책임이 있습니다.

  콜백 기반 스타일의 명령 적으로 변발, 재 시도 및 "뚜렷한"논리가 효과적이지만 깨지기 쉽고 복잡합니다.
  • 키는 rxjs를 사용한 프로그래밍이 다음과 같습니다
  선언 프로그램; 확장 가능한 시스템; 간단하고 직접적이고 강력한 오류 처리.
  rxjs의 상위 10 개 필수 알고 기능을 탐색하는 과정에서 위의 예에서 각 함수를 만나게됩니다.
  • 간단한 흐름 작동
  간단한 스트림의 기본 함수 (문자열과 같은 간단한 값을 방출하는 스트림)에는 다음이 포함됩니다.
  • map () 필터 () 감소 () take () / take while ()
  take ()와 take ()을 제외하고, 이들은 JavaScript의 고차 배열 함수와 유사합니다.
  우리는 예제 문제를 해결하여 이러한 기능을 적용합니다. .com 또는 .org 웹 사이트를 사용하여 데이터베이스의 모든 사용자를 찾고 웹 사이트 이름의 평균 길이를 계산합니다.

  const task_stream =
    parameter_stream.
      debounce(1000).
      map((parameter) => {
        getTasks().
          retry(3).
          filter((task) => task.user_id === user_id).
          filter((task) => task.completed === parameter).
          map((task)    => task.name)
      }).
      flatMap(Rx.Observable.from).
      distinctUntilChanged().
      update()

  JSONPLASEHOLDER는 사용자의 원천 역할을 할 것입니다. 이것은 우리가 사용할 사용자 데이터의 JSON 표현입니다.

  > 1. 데이터를 변환하기 위해 map ()를 사용하십시오 Observable Objects에서 map ()를 사용하는 것은 배열에서 사용하는 것과 동일합니다. It : <..>

  콜백을 매개 변수로 받아들입니다 호출하는 배열의 각 요소에서 실행하십시오 원래 배열의 각 요소가 콜백으로 생성 된 결과로 대체되는 새 배열을 반환합니다.
  • 관찰 가능한 객체에서 map ()를 사용할 때의 유일한 차이점은 다음과 같습니다.
  새로운 배열이 아닌 새로운 관찰 가능한 객체를 반환합니다 관찰 가능한 객체가 즉시 새로운 프로젝트가 아닌 새로운 프로젝트를 발행 할 때 실행됩니다.
• Promise의 관찰 가능한 대상
약속은 예를 들어 서버에 대한 호출 결과와 같이 비동기 적으로 얻을 수있는 단일 미래의 값을 나타냅니다. Promise의 정의 특징은 미래의 가치만을 나타냅니다. 여러 비동기 데이터를 반환 할 수 없습니다.

이것은 rx.observable.fromise ()를 사용하면 단일 값 또는 : 를 방출하는 관찰 가능한 객체를 얻는다는 것을 의미합니다.

약속에 맞는 가치; 약속 거부 된 가치.
약속이 문자열이나 숫자를 반환하면 특별한 일을 할 필요가 없습니다. 그러나 배열을 반환 할 때 (우리의 경우) 배열 자체가 아닌 배열의 내용을 단일 값으로 방출하는 관찰 가능한 객체를 만드는 것을 선호합니다.
> 6. flatMap () 를 사용하십시오 이 프로세스를 평평하게하는데,이 과정은 flatmap ()가 처리합니다. 과부하가 많지만 가장 간단하고 가장 일반적으로 사용되는 오버로드 만 사용합니다.
• flatmap ()를 사용할 때는 다음과 같습니다
단일 가치 해상도 또는 약속의 거부를 발행하는 관찰 가능한 객체에서 flatmap ()을 호출하십시오 새로운 관찰 가능한 객체를 생성하기 위해 함수를 전달하십시오.
이 예에서는 rx.observable.from ()을 전달하여 배열 값에서 시퀀스를 생성합니다. 이것은 짧은 서문의 코드를 다룹니다

rxjs는 또한 flatmap () : selectmany ()에 대한 별칭을 제공합니다.

여러 스트림 결합 일반적으로, 우리는 결합 해야하는 여러 개의 스트림이 있습니다. 스트림을 결합하는 방법에는 여러 가지가 있지만 일부는 다른 것보다 더 자주 나타납니다.

> 7. concat () 및 merge ()를 사용하여 스트림 를 결합합니다 연결 및 병합은 스트림을 결합하는 가장 일반적인 두 가지 방법입니다.

연결은 첫 번째 스트림의 값이 완료 될 때까지 새 스트림을 생성 한 다음 두 번째 스트림의 값을 방출함으로써 새 스트림을 만듭니다.

병합은 활성 스트림의 값을 방출하여 여러 스트림에서 새 스트림을 만듭니다 Facebook 메신저에서 동시에 두 사람과 대화하는 것에 대해 생각하십시오. Concat ()는 양 당사자로부터 메시지를받는 상황이지만 다른 사람에게 답장하기 전에 한 사람과 대화를 완료하는 상황입니다. Merge ()는 그룹 채팅을 만들고 동시에 두 개의 메시지 스트림을받는 것과 같습니다.

concat () 스트림은 먼저 Source1의 모든 값을 인쇄하고 Source1이 완료된 후에 만 ​​Source2의 값을 인쇄하기 시작합니다.
1. merge () 스트림은 수신 된 순서에 따라 source1 및 source2의 값을 인쇄합니다. 두 번째 스트림의 값을 방출하기 전에 첫 번째 스트림이 완료되기를 기다리지 않습니다.
> 8. Switch () 를 사용하십시오 일반적으로, 우리는 관찰 가능한 물체를 방출하는 관찰 가능한 물체를 듣고 싶지만 소스의 최신 배출에만 초점을 맞추고 싶습니다. Facebook Messenger의 비유를 더욱 확장하려면 Switch ()는 당신입니다.
이 목적을 위해 RXJS는 스위치를 제공합니다.

사용자 인터페이스는 switch ()에 몇 가지 좋은 사용 사례를 제공합니다. 사용자가 검색하려는 것을 선택할 때마다 응용 프로그램이 요청을하는 경우 최신 선택 결과를보고 싶다고 가정 할 수 있습니다. 따라서 Switch ()를 사용하여 최신 선택 결과에 대해서만 듣습니다.

그건 그렇고, 우리는 대역폭을 낭비하지 않아야하고 마지막으로 사용자가 매 초마다 서버에 대한 액세스 만 선택해야합니다. 이를 위해 사용하는 기능은 Debounce () 라고합니다 다른 방향으로 가고 첫 번째 선택 만 따르면 스로틀 ()을 사용할 수 있습니다. API가 동일하지만 반대쪽으로 동작합니다.

> 9 사용자가 특정 ID로 게시물이나 사용자를 검색 할 수있게하려면 어떻게해야합니까?

데모의 경우, 다른 드롭 다운 메뉴를 만들고 사용자가 검색하려는 항목의 ID를 선택할 수 있습니다.

두 가지 상황이 있습니다. 사용자가있는 경우 :

선택을 변경하십시오 <.> 두 가지 옵션을 변경하십시오.

combinelatest () 를 사용하여 모든 변화 수준에 응답하십시오 첫 번째 경우, 우리는 다음을 사용하여 네트워크 요청을 시작하는 스트림을 만들어야합니다.

사용자의 최근 엔드 포인트 선택; 최근 사용자가 선택한 ID.
이것은 combinelatest ()의 것입니다 :
스트림이 값을 방출 할 때마다 CombinElatest ()는 방출 된 값을 가져 와서 다른 스트림에 의해 방출 된 마지막 항목과 쌍을 쌍으로 쌍을 배열로 발행합니다.
이것은 차트에서 시각화하기가 더 쉽습니다
1. 두 스트림의 변경 사항에만 응답하려면 ZIP를 사용하십시오. 따라서 사용자가 선택한 ID 및 엔드 포인트 필드를 업데이트 할 때까지 기다렸다가 CombinElatest ()를 Zip ()로 바꾸십시오.
다시, 이것은 차트에서 이해하기가 더 쉽습니다.
2. compinelatest ()와 달리 zip ()는 업데이트 된 값의 배열을 보내기 전에 두 관측 가능한 객체가 새 컨텐츠를 방출 할 때까지 기다립니다.
> 10. TakeUntil
마지막으로, takeUntil ()을 사용하면 두 번째 스트림이 값을 방출하기 시작할 때까지 첫 번째 스트림을들을 수 있습니다.
이것은 스트림을 조정해야하지만 그것을 결합 할 필요는 없을 때 유용합니다.
요약 배열에 시간 치수를 추가하면 프로그램에 대한 새로운 사고의 문이 열립니다.
rxjs는 우리가 여기에서 볼 수있는 것보다 훨씬 많지만 먼 길을 가기에 충분합니다.
1. rxjs lite로 시작하여 문서를 참조하고 시간이 걸릴 준비를하십시오. 당신이 그것을 알기 전에, 모든 것이 스트림처럼 보일 것입니다.
RXJS 기능 (FAQ)에 대한 FAQ
RXJ와 전통적인 자바 스크립트의 주요 차이점은 무엇입니까?

rxjs는 비동기 또는 콜백 기반 코드의 조합을 단순화하기 위해 관찰 가능한 객체를 사용하는 반응 형 프로그래밍 라이브러리입니다. 이는보다 명확한 프로그래밍 스타일의 기존 JavaScript를 사용하는 것과 비교됩니다. 주요 차이점은 데이터를 처리하는 방법입니다. RXJS는 데이터를 스트림으로 취급하여 다양한 연산자를 사용하여 작동 및 변환 할 수있는 반면 기존의 JavaScript는보다 선형적인 방식으로 데이터를 처리합니다.

rxjs에서 관찰 가능한 객체를 만드는 방법은 무엇입니까?

rxjs에서는 new Observable () 생성자를 사용하여 관찰 가능한 객체를 만들 수 있습니다. 이 생성자는 가입자 함수라고하는 인수로서 기능을 취하며, 처음에는 관찰 가능한 객체에 구독 할 때 실행됩니다. 기본 예는 다음과 같습니다.

RXJS의 주요 운영자는 무엇이며 어떻게 작동합니까?

rxjs에는 관찰 가능한 객체와 관찰자 사이의 데이터가 어떻게 흐르는지 제어하는 ​​데 사용할 수있는 광범위한 연산자가 있습니다. 주요 연산자 중 일부에는 map (), filter (), reted (), merge () 및 concat ()가 포함됩니다. 이러한 각 연산자는 데이터 변환, 특정 값을 필터링하거나 여러 스트림을 결합하는 등 다양한 방식으로 데이터 스트림을 작동합니다.

const task_stream =
  // 创建所有数据库中任务的流
  getTasks().
    // 只获取此用户的任务
    filter((task) => task.user_id == user_id).
    // 获取未完成的任务
    filter((task) => !task.completed).
    // 只获取任务名称
    map((task) => task.name)

/* 任务如下所示：
   task = {
    user_id   : number,
    completed : boolean,
    name      : string
   }
 */

rxjs의 오류를 처리하는 방법은 무엇입니까?

rxjs는 catcherror (), retry () 및 retryed way ()와 같은 오류를 처리하는 여러 연산자를 제공합니다. CatchError () 연산자는 관찰 가능한 스트림에서 오류를 잡고 새로운 관찰 가능한 객체를 반환하거나 오류를 던지는 데 사용됩니다. Retry () 연산자는 오류가 발생한 경우 관찰 가능한 물체로 다시 구독하는 데 사용될 수 있습니다. () 연산자가 비슷하지만 재 시도는 비슷하지만 재 시도시기를 더 잘 제어 할 수 있습니다.

rxjs에서 관측 가능한 객체의 구독을 취소하는 방법은 무엇입니까?

관찰 가능한 것을 구독하면 unsubscribe () 메소드가있는 구독을받습니다. 이 방법을 호출하여 관찰 가능한 객체의 실행을 취소하고 사용중인 자원을 정리할 수 있습니다. 예는 다음과 같습니다.

중간 가열 관찰 가능한 물체와 냉간 관찰 가능한 물체의 차이점은 무엇입니까?

rxjs에서는 관찰 가능한 물체가 뜨겁거나 차가울 수 있습니다. 콜드 관찰 가능성은 구독 할 때 실행되기 시작하지만 뜨거운 관측 가능성은 구독하기 전에도 값을 생성합니다. 다시 말해, 차가운 관찰 가능한 물체는 불활성이지만 뜨거운 관찰 가능한 물체는 그렇지 않습니다.

RXJ에서 여러 관측 가능한 물체를 결합하는 방법은 무엇입니까?

rxjs는 merge (), concat (), combinelatest () 및 zip ()와 같은 여러 관측 가능한 객체를 결합하는 여러 연산자를 제공합니다. 이러한 각 연산자는 특정 요구에 따라 데이터 스트림을 다양한 방식으로 결합합니다.

RXJS 테마의 목적은 무엇입니까?

RXJS의 주제는 여러 관찰자에게 값의 멀티 캐스트를 허용하는 특수 유형의 관찰 가능한 객체입니다. 일반적인 관찰 가능한 대상과 달리 주제는 많은 청취자에게 레지스트리를 유지합니다.

angular와 함께 rxjs를 사용하는 방법은 무엇입니까?

Angular는 RXJ를 제작하고 내부적으로 다양한 기능에 사용합니다. 자체 코드에서 RXJ를 사용하여 비동기 작업을 처리하고 자동 완료, 디자이터, 스로틀링, 폴링 등과 같은 기능을 구현할 수 있습니다.

rxjs의 일반적인 사용 사례는 무엇입니까?

const task_stream =
  parameter_stream.
    debounce(1000).
    map((parameter) => {
      getTasks().
        retry(3).
        filter((task) => task.user_id === user_id).
        filter((task) => task.completed === parameter).
        map((task)    => task.name)
    }).
    flatMap(Rx.Observable.from).
    distinctUntilChanged().
    update()

rxjs는 비동기 데이터가 필요한 다양한 시나리오에서 사용할 수 있습니다. 일부 일반적인 사용 사례에는 사용자 입력 처리, HTTP 요청, WebSocket 사용 및 애니메이션 처리가 포함됩니다.

위 내용은 10 예제와 함께 알아야 할 RXJS 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!