RXJS可观察的方法.pipe()和.subscribe()之间的差异

Question

我最近注意到我可以在里面.pipe()但不在里面返回一个值.subscribe().

这两种方法有什么区别？

例如,如果我有这个功能,让我们称之为"存款",如果我这样做,它应该返回账户余额:

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

它返回一个observable,如果我这样做:

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

它按预期返回帐户余额.

所以为什么？

Answer 1

该pipe方法用于链接可观察的运算符,subscribe用于激活可观察和侦听发出的值.

pipe添加该方法是为了允许webpack从最终的JavaScript包中删除未使用的运算符.它使构建较小的文件更容易.

例如,如果我有这个功能,让我们称之为'存款',它应该返回帐户余额,如果我这样做:

这不是它的回报.它返回Subscription您调用时创建的对象Subscribe.

它按预期返回帐户余额.

这不是它的回报.它返回一个Observable使用map运算符的东西.示例中的map运算符不执行任何操作.

Answer 2

例子

一个重要的区别是，当您不执行时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>