rxjs에 대한 자세한 설명

이번에는 rxjs에 대한 자세한 설명을 가져오겠습니다. rxjs 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

rxjs(Reactive Extensions for JavaScript)는 JavaScript의 리액티브 확장입니다. 리액티브 아이디어는 시간이 지남에 따라 변경되는 데이터, 상태, 이벤트 등을 관찰 가능한 시퀀스(Observable Sequence)로 변환한 다음 구독하는 것입니다. 시퀀스 객체 내의 객체가 변경되면 미리 정해진 다양한 변형 및 작업이 수행됩니다.

rxjs는 비동기 시나리오에 적합하며 프런트 엔드 상호 작용에서 요청과 이벤트를 최적화하는 데 사용할 수 있습니다.

rxjs 기능

비동기 프로그래밍의 사양을 통합합니다. Promise, ajax, 이벤트 등 모두 시퀀스(Observable Sequence)로 캡슐화됩니다. 비동기 링크가 변경되면 변경된 정보를 시퀀스를 관찰하여 가로챌 수 있습니다.

프런트 엔드 비즈니스 레이어와 프리젠테이션 레이어는 분리되어 있습니다. 예를 들어 프리젠테이션 레이어는 지정된 이벤트가 트리거될 때 DOM과 관련 없는 처리 로직에 신경 쓸 필요가 없습니다. 동시에 비즈니스 계층은 프레젠테이션 계층에 노출하지 않고도 비동기 작업의 여러 비동기 논리 간의 관계를 조합할 수도 있습니다. 프리젠테이션 계층은 비동기 작업에서 데이터 변경에 관심이 있습니다.

rxjs가 개발한 비즈니스 레이어는 높은 탄력성, 높은 안정성, 높은 실시간 성능을 특징으로 합니다.

rxjs 인스턴스 개념

Observable: Observable 데이터 시퀀스.

Observer: Observer 인스턴스, 지정된 데이터를 언제 관찰할지 결정합니다.

Subscription: 데이터 시퀀스를 관찰하면 구독 인스턴스가 반환됩니다.

Operators: Observable 작업 방법, 포함 데이터 시퀀스 변환, 필터링 등 모든 연산자 메서드에서 허용하는 매개 변수는 전송된 마지막 데이터 변경 값이며 메서드 반환 값은 새 데이터 변경 내용 방출이라고 합니다.

스케줄러. : 스케줄링 동시성을 제어합니다. 즉, Observable이 Subject의 변경 응답을 수락하면 스케줄러를 통해 응답 모드를 설정할 수 있습니다. 현재 내장된 응답은 Object.keys(Rx.Subject)를 호출하여 볼 수 있습니다.

Observable에는 생성, 구독, 실행, 소멸이라는 네 가지

생명주기

가 있습니다. Obervable을 생성하고 관찰된 시퀀스 소스 인스턴스를 반환합니다. 이 인스턴스에는 데이터를 보내는 기능이 없습니다. 반면, 새로운 Rx.Subject를 통해 생성된 관찰 개체 인스턴스에는 데이터 소스를 보내는 기능이 있습니다.

시퀀스가 시퀀스 소스 인스턴스를 통해 새로운 데이터 변경 사항을 내보낼 때 응답 메서드(콜백 메서드)를 구독할 수 있습니다.

응답 작업은 실제로 Observable의 실행입니다.

시퀀스 소스 인스턴스는 소멸될 수 있으며, 구독 방식에 오류가 발생하면 자동으로 소멸됩니다.

시퀀스 소스 인스턴스의 catch 메서드는 구독 메서드에서 발생하는 오류를 캡처할 수 있으며, 시퀀스 소스 인스턴스는 catch 메서드에서 반환된 값을 새로운 시퀀스 소스 인스턴스로 받아들일 수 있습니다.

rxjs 연산자

rxjs는 관찰 가능한 객체를 생성하기 위한 많은 연산자를 제공합니다.

import Rx from 'rxjs';

create

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

출력: hello

world

of

값 변수 변환

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

출력: 안녕하세요

world

완료


from

배열 변수 변환

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

출력: 1

    2     3     complete
fromEvent

이벤트 변수 변환

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

Promise(약속) 변수 변환

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

출력: hello world

완료

비어있음

빈 연산자는 빈 Observable을 반환하며 이 객체를 구독하면 완전한 정보가 즉시 반환됩니다.

never

never 연산자는 무한한 Observable을 반환합니다. 이 개체를 구독하면 아무 일도 일어나지 않습니다. 항상 존재하지만 아무것도 하지 않는 Observable 개체입니다.

interval

interval 연산자는 타이밍 간격을 나타내는 데 사용되는

숫자 유형

매개변수를 지원합니다.

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

출력: 0

    1
     2
     ...

위 코드는 1초마다 증가하는 값이 출력되며 초기값은 0부터 시작한다는 의미입니다.

timer

timer 연산자는 두 가지 매개변수를 지원합니다. 첫 번째 매개변수는 첫 번째 값을 전송하기 위한 대기 시간을 설정하는 데 사용됩니다. 두 번째 매개변수는 첫 번째 전송 후 다른 값을 전송하는 간격을 나타냅니다.

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

출력: 0 //1초 후 1 //5초 후

2 //5초 후
...


풀 대 푸시

Pull과 Push는 데이터 생산자와 데이터 소비자 사이의 서로 다른 통신 방식입니다

Pull

Pull 시스템에서는 데이터 소비자가 언제 데이터 생산자로부터 데이터를 얻을지 결정하지만 생산자 자신은 데이터가 언제 나올지 알지 못합니다. 소비자에게 발송됩니다.

모든 JavaScript 함수는 데이터 생성자입니다. 함수를 호출하는 코드는 단일 반환 값을 가져와 데이터를 소비합니다.

ES6의 Iterator 및 Generator
Generator
는 또 다른 Pull 시스템입니다. iterator.next()를 호출하는 코드는 소비자이며 여기에서 여러 값을 가져올 수 있습니다. 푸시

Push 시스템에서는 데이터 생산자가 소비자에게 데이터를 언제 보낼지 결정하고, 소비자는 데이터를 받기 전에 데이터를 받을 것이라는 사실을 깨닫지 못합니다.
Promise는 가장 일반적인 푸시 시스템입니다. Promise(데이터 생산자)는 해결(성공 상태) 또는 거부(실패 상태)를 보내 콜백(데이터 소비자)을 실행하지만 다음과 같은 함수와 다릅니다. 이 콜백 함수로 푸시됩니다.

RxJS는 새로운 푸시 시스템인 Observables(관찰 가능한 객체)를 도입합니다. 관찰 가능한 객체는 여러 값을 생성하는 생산자입니다. 새로운 데이터가 생성되면 적극적으로 관찰자에게 푸시됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

프런트 엔드 개발의 SVG 애니메이션

TypeScript를 알아야 함

위 내용은 rxjs에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!