명령 식 에서 응답 식 까지 (3)

지난번 에 응답 식 에서 사용 하 는 디자인 모델 을 말 했 는데 오늘 우 리 는 주로 rxjs 에서 응답 식 을 실현 하 는 세 가지, Observable, subject 와 Subscription 을 보 았 다.
Observable -- 가관 측정 시퀀스
1 절 에서 push 유형의 시스템 과 pull 유형의 시스템 을 소 개 했 는데 모두 값 을 만 들 수 있 습 니 다.
단일 값 생 성
여러 값 생 성
pull
function
iterator
push
promise
？
es6 에서 promise 는 이미 원생 의 지 지 를 받 았 지만 push 시스템 에서 여러 개의 값 을 만 드 는 원생 의 방법 이 없어 Observable 은 이 공백 을 보충 했다.

//     observable
const observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

console.log('just before subscribe');

//    subscribe       observable    
observable.subscribe({
    next: x => console.log('got value ' + x),
    error: err => console.error('something wrong occurred: ' + err),
    complete: () => console.log('done'),
});

console.log('just after subscribe);

이 코드 를 실행 하면 다음 과 같은 결 과 를 얻 을 수 있 습 니 다.

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

결 과 를 통 해 알 수 있 듯 이 한 번 의 구독 을 통 해 저 희 는 observable 에서 보 내 온 모든 값 을 얻 을 수 있 습 니 다. 또한 출력 순 서 를 살 펴 보 세 요. 1, 2, 3 은 after 전에 있 고 4 는 after 후에 observable 이 보 내 는 값 이 반드시 비동기 나 같은 단계 가 아니 라 언제 가 져 올 수 있 는 지 는 어떤 방식 으로 보 내 느 냐 에 달 려 있 습 니 다.
위의 코드 중 몇 가지 설명 이 필요 할 수 있 습 니 다.

create: 이것 은 실제로 Observable 의 구조 함수 의 별명 입 니 다. 다시 말 하면 new Rx. Observable (...) 으로 대체 할 수 있 습 니 다.

observer: 관찰자, 말 그대로 이것 은 바로 우리 가 지난 절 에 말 한 관찰자 모델 중의 관찰자 이다. 여 기 는 rxjs 가 우리 에 게 전달 하 는 것 이다. 사실은 우리 가 subscribe () 에서 들 어 온 대상 이다.다음 값 이 무엇 인지 알려 주 는 세 가지 방법 이 있 습 니 다.error 방법 은 observable 에서 오류 가 발생 했 을 때 관찰자 에 게 알 립 니 다. complete 방법 은 관찰자 에 게 현재 흐 르 는 값 이 발사 되 었 음 을 알 립 니 다.

subscribe: Observable 류 가 제공 하 는 방법 으로 관측 가능 한 시퀀스 에서 나 오 는 값 을 얻 고 관찰 자 를 매개 변수 로 받 습 니 다.물론 위의 코드 는 observable. subscribe

x => console.log('got value ' + x),
err => console.error('something wrong occurred: ' + err),
() => console.log('done'),

라 고 쓸 수 있 습 니 다.

첫 번 째 매개 변 수 는 next 알림 을 처리 하고 두 번 째 매개 변 수 는 error 알림 을 처리 합 니 다. 세 번 째 매개 변 수 는 complete 알림 을 처리 할 지 여 부 를 선택 할 수 있 습 니 다. 즉, 두 번 째, 세 번 째 매개 변 수 는 생략 할 수 있 습 니 다.물론 rxjs 내부 에 서 는 우리 가 들 어 온 매개 변 수 를 그 관찰자 대상 으로 처리 할 것 이다.
상기 코드 에서 저 희 는 observable 생 성 (create 를 통 해), 구독 (subscribe 를 통 해), 실행 (next 와 complete 호출) 과정 을 실 행 했 습 니 다.그 밖 에 우리 가 구독 을 필요 로 하지 않 을 때 관찰 자 는 안전하게 탈퇴 할 수 있어 야 한다.
subscription
이것 이 바로 우리 가 구독 을 취소 할 때 필요 한 것 입 니 다. 위의 구독 코드 의 완전한 작성 방법 은 다음 과 같 습 니 다.

const subscription = observable.subscribe({...});

이것 은 우리 가 observable 을 구독 한 후에 얻 은 것 입 니 다. 즉, subscribe 방법의 반환 값 입 니 다. 그 위 에 세 가지 중요 한 방법 이 있 습 니 다.

unsubscribe 는 말 그대로 구독 을 취소한다.

add 에 다른 subscription 을 추가 합 니 다.여러 개의 subscription 이 있 을 때 우 리 는 이 방법 을 통 해 그것들 을 모두 연결 할 수 있 습 니 다. 이렇게 취소 할 때 하나의 subscribe 방법 만 취소 하고 모든 subscribe 방법 을 사용 하지 않 아 도 됩 니 다.

remove 는 당연히 추가 할 수 있 고 제거 할 수 있 습 니 다.현재 subscription 에서 다른 subscription / / 이전의 구독 을 취소 합 니 다. unsubscribe (); /이전에 만 든 observable 을 다시 구독 합 니 다. 구독 을 취소 할 때 각각 unsubscribe 방법 const subscribe 1 = observable. subscribe ({...}) 를 호출 합 니 다.const subscription2 = observable.subscribe({...});const subscription3 = observable.subscribe({...}); //이전에 만 든 observable 을 다시 구독 합 니 다. 구독 을 취소 할 때 unsubscribeconst sub $= observable. subscribe ({...})

.add(observable.subscribe({...}))
.add(observable.subscribe({...}));

를 한 번 만 호출 합 니 다.
subject
이것 은 observable 이자 observer 이기 때문에 subscribe 에 의 해 next, error, complete 를 통 해 발사 할 수 있 습 니 다.다음 예 에서 우 리 는 Subject 에 두 명의 관찰 자 를 추가 한 다음 에 값 을 추가 합 니 다.

const subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

subject.subscribe({
    next: v => console.log('observerB: ' + v)
});

subject.next(1);
subject.next(2);

실행 후 출력:

observerA: 1
observerB: 1
observerA: 2
observerB: 2
   Subject      Observer ，             Observable  subscribe  ：

var subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

subject.subscribe({
    next: v => console.log('observerB: ' + v)
});

var observable = Rx.Observable.from([1,2,3]);

observable.subscribe(subject); //    Subject       Observable

실행 후 출력:

observerA: 1
observerB: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

위의 방법 을 통 해 우 리 는 기본적으로 Subject 를 통 해 단일 방송 인 Observable 을 멀티캐스트 로 바 꾸 었 다.이 예 는 단지 하나의 실행 문맥 을 여러 관찰자 에 게 공유 하 는 방법 을 보 여 주 는 것 일 뿐이다.
위의 코드 에는 from 방법 이 있 는데 그 역할 은 바로 관측 가능 한 서열 을 만 드 는 것 이다. 예전 의 create 방법 과 유사 하지만 더욱 간결 하 다. rxjs 에서 조작 자 라 는 전문 적 인 이름 이 있 는데 여러 가지 조작 자 를 통 해 우 리 는 관측 가능 한 서열 의 생 성 을 실현 하고 서열 중의 데 이 터 를 여러 가지 변환 할 수 있다.rxjs 를 사용 할 때 우 리 는 대부분 다양한 조작 부 호 를 사용한다 고 할 수 있다.