RXJS observable 上的 .pipe() 和 .subscribe() 方法之间的区别答案

【问题标题】：Difference between the methods .pipe() and .subscribe() on a RXJS observableRXJS observable 上的 .pipe() 和 .subscribe() 方法之间的区别
【发布时间】：2018-12-18 13:03:25
【问题描述】：

我最近注意到我可以在 .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;
        });
    );
}

它按预期返回帐户余额。

那为什么？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

pipe 方法用于链接 observable 运算符，subscribe 用于激活 observable 并侦听发出的值。

添加了 pipe 方法以允许 webpack 从最终的 JavaScript 包中删除未使用的运算符。它使构建更小的文件变得更加容易。

例如，如果我有这个功能，我们称之为“存款”，如果我这样做，它应该返回账户余额：
deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}
它返回一个可观察对象

这不是它返回的内容。它返回调用Subscribe 时创建的Subscription 对象。

如果我这样做：

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

它按预期返回帐户余额。

这不是它返回的内容。它返回一个使用map 运算符的Observable。您示例中的 map 运算符什么也不做。

【讨论】：

这个答案现在不完整。好像缺少截图或者代码sn-ps
我认为他指的是 OP 的代码 sn-ps，而不是在答案中复制它们。这也引起了我的注意。
我编辑了答案以包含 OP 的代码 sn-ps 以提高可读性，感谢@ShafiqJetha 指出缺少的内容。