관찰 가능한 RXJ의 .pipe() 메서드와 .subscribe() 메서드 간의 차이

관찰 가능한 RXJ의 .pipe() 메서드와 .subscribe() 메서드 간의 차이

최근에 내부 값을 반환할 수 있음을 알게 되었습니다..pipe()그러나 내부는 아닙니다..subscribe().

이 두 가지 방법의 차이점은 무엇입니까?

예를 들어, 이 기능을 가지고 있다면 계좌 잔액을 반환해야 하는 '예금'이라고 부르자, 이렇게 하면 다음과 같습니다.

deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}

그러면 관찰 가능한 항목이 반환되고 이 작업을 수행하면 다음과 같이 됩니다.

deposit(account, amount){
    return this.http.get('url')
    .pipe(
        map(res => {
            return res;
        });
    );
}

그것은 예상대로 계좌 잔액을 반환합니다.

그래서 왜죠?

그pipe방법은 관측 가능한 연산자를 연결하기 위한 것이며,subscribe는 관측 가능한 값을 활성화하고 방출된 값을 수신하기 위한 것입니다.

그pipe메서드가 추가되어 웹 팩이 최종 JavaScript 번들에서 사용되지 않는 연산자를 삭제할 수 있습니다.더 작은 파일을 쉽게 만들 수 있습니다.

예를 들어, 이 기능이 있으면 '예금'이라고 부르죠. 계좌 잔액을 반환해야 하는데, 이렇게 하면 다음과 같습니다.

deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}

관측 가능한 값을 반환합니다.

그것은 그것이 반환하는 것이 아닙니다.다음을 반환합니다.Subscription호출할 때 생성된 개체Subscribe.

내가 이렇게 하면,

deposit(account, amount){
    return this.http.get('url')
    .pipe(
        map(res => {
            return res;
        });
    );
}

그것은 예상대로 계좌 잔액을 반환합니다.

그것은 그것이 반환하는 것이 아닙니다.다음을 반환합니다.Observable를 사용합니다.map교환입니다.이 예제의 지도 연산자는 아무 것도 하지 않습니다.

한 가지 중요한 차이점은 실행하지 않을 때subscribe요청은 더 최신으로 전송됩니다.pipe절대 실행되지 않습니다.다음은 차이점을 보여주는 작업 예제입니다.

구독

const { interval, of } = rxjs;
const { delay, take } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
      .subscribe(res => {
          console.log('hello from subscriber');
          return res;
      })
}

let subscription = deposit('',''); // immediately send request
// you can cancel request by subscription.unsubscribe()

console.log('subscribed');

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

파이프

const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
        .pipe(
            map(res => {
                console.log('hello from pipe');
                return res;
            })
        );
}

const observable = deposit('',''); // this will return observable and do nothing


console.log('nothing happen');

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

파이프 + 구독

const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
      .pipe(
          map(res => {
              console.log('hello from pipe');
              return res;
          })
      );
}

const observable = deposit('',''); // this will return observable and do nothing

const subscription = observable.subscribe(result => { // this will send request 
  console.log('hello from subscriber')
}); 

// subscription.unsubscribe() - this will cancel request

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

언급URL : https://stackoverflow.com/questions/51269372/difference-between-the-methods-pipe-and-subscribe-on-a-rxjs-observable