10 예제와 함께 알아야 할 RXJS 기능-JS 튜토리얼-php.cn

10 Need-to-Know RxJS Functions with Examples 이 기사는 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 ()를 사용할 때의 유일한 차이점은 다음과 같습니다.

새로운 배열이 아닌 새로운 관찰 가능한 객체를 반환합니다 관찰 가능한 객체가 즉시 새로운 프로젝트가 아닌 새로운 프로젝트를 발행 할 때 실행됩니다.

우리는 map ()를 사용하여 사용자 데이터 스트림을 웹 사이트 이름 만 포함하는 목록으로 변환 할 수 있습니다.

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를 사용하면 map ()를 select ()로 호출 할 수 있습니다. 두 이름 모두 동일한 함수를 나타냅니다.

< > 2. 필터 결과 <🎜 🎜> <)> like map (), filter ()는 배열에서와 관측 가능한 객체에서 거의 동일한 역할을 수행합니다. .NET 또는 .org 웹 사이트 주소가있는 모든 사용자를 찾으려면 다음을 작성할 수 있습니다.

이것은 웹 사이트가 "net"또는 "org"로 끝나는 사용자 만 선택합니다.

필터 ()는 ()에 별명이 있습니다.

<> 3. Reduce ()를 사용하여 결과를 수집하십시오 Reduce ()를 사용하면 모든 단일 값을 사용하여 단일 결과로 변환 할 수 있습니다.

필터 () 또는 map ()과 달리 동작은 사용에 따라 다르기 때문에 reduce ()는 종종 가장 혼란스러운 기본 목록 작업입니다.

<(> 일반적으로 Reduce ()는 값 모음을 가져 와서 단일 데이터 포인트로 변환합니다. 이 예에서는 웹 사이트 이름 스트림을 제공하고 Reduce ()를 사용하여 해당 스트림을 찾은 웹 사이트 수와 이름 길이의 합을 계산하는 객체로 변환합니다.

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

로그인 후 복사

여기서, 우리는 스트림을 단일 객체로 단순화합니다.

우리는 몇 개의 사이트를 본 적이 있습니다 모든 이름의 총 길이.

<(> Reduce ()는 소스 관측 가능한 객체가 완료 될 때만 결과를 반환합니다. 스트림이 새 항목을 수신 할 때마다 축합기의 상태를 알고 싶다면 Scan ()을 대신 사용하십시오.

< > 4. watte ()를 사용하여 결과를 제한합니다 <🎜 🎜> take () 및 ()는 간단한 스트림의 기본 함수를 보완합니다.

<)> (n) 스트림에서 n 값을 읽고 구독 취소하십시오.

우리는 스캔 ()을 사용하여 웹 사이트를받을 때마다 객체를 방출하고 처음 두 값 만 가져갈 수 있습니다.

rxjs는 또한 TakeWhile ()을 제공하여 특정 부울 테스트가 설정되기 전에 값을 얻을 수 있습니다. 우리는 테이크 while ()를 사용하여 위의 스트림을 다음과 같이 쓸 수 있습니다.
고차 흐름 작동 <🎜 🎜> 이러한 기능은 배열보다는 관찰 가능한 객체에서 작동한다는 점을 제외하고 친숙한 목록 작업과 거의 동일합니다.

"[i] f 배열#extras를 사용하여 배열에 대해 프로그램하는 방법을 알고 있습니다
배열에 간단한 값 (예 : 배열 또는 객체)보다 더 복잡한 데이터가 포함될 수있는 것처럼 관찰 가능한 객체는 약속 또는 기타 관찰 가능한 객체와 같은 고차 데이터를 방출 할 수도 있습니다. 이곳은보다 전문적인 도구가 시작됩니다.
source. map((user) => user.website)
로그인 후 복사
< > 5. flatMap ()을 사용하여 대류 <🎜 🎜>를 누릅니다 <,>… 사실, 우리는 이미 그것을 사용하고 있습니다!

소스 스트림을 정의 할 때 FromPromise () 및 flatMap () : <🎜 🎜 🎜 🎜>를 호출합니다.

이것은 세 가지 새로운 메커니즘을 사용합니다

에서 <🎜

; rx.observable.from; <.> flatmap.

Promise의 관찰 가능한 대상

약속은 예를 들어 서버에 대한 호출 결과와 같이 비동기 적으로 얻을 수있는 단일 미래의 값을 나타냅니다.

Promise의 정의 특징은 미래의 가치만을 나타냅니다. 여러 비동기 데이터를 반환 할 수 없습니다.

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

약속에 맞는 가치; 약속 거부 된 가치.

약속이 문자열이나 숫자를 반환하면 특별한 일을 할 필요가 없습니다. 그러나 배열을 반환 할 때 (우리의 경우) 배열 자체가 아닌 배열의 내용을 단일 값으로 방출하는 관찰 가능한 객체를 만드는 것을 선호합니다.

이 프로세스를 평평하게하는데,이 과정은 flatmap ()가 처리합니다. 과부하가 많지만 가장 간단하고 가장 일반적으로 사용되는 오버로드 만 사용합니다.

flatmap ()를 사용할 때는 다음과 같습니다

단일 가치 해상도 또는 약속의 거부를 발행하는 관찰 가능한 객체에서 flatmap ()을 호출하십시오 새로운 관찰 가능한 객체를 생성하기 위해 함수를 전달하십시오.

<,>이 예에서는 rx.observable.from ()을 전달하여 배열 값에서 시퀀스를 생성합니다.

이것은 짧은 서문의 코드를 다룹니다

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

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

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

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

병합은 활성 스트림의 값을 방출하여 여러 스트림에서 새 스트림을 만듭니다 <🎜 🎜

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

<))> merge () 스트림은 수신 된 순서에 따라 source1 및 source2의 값을 인쇄합니다. 두 번째 스트림의 값을 방출하기 전에 첫 번째 스트림이 완료되기를 기다리지 않습니다.
를 사용하십시오 일반적으로, 우리는 관찰 가능한 물체를 방출하는 관찰 가능한 물체를 듣고 싶지만 소스의 최신 배출에만 초점을 맞추고 싶습니다.

Facebook Messenger의 비유를 더욱 확장하려면 Switch ()는 당신입니다.

이 목적을 위해 RXJS는 스위치를 제공합니다.

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

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

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

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

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