我最近注意到,我可以返回.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方法用于激活可观察运算符并监听emits 值.

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

例如,如果我有这个函数,让我们称它为‘DATCH’,它应该返回帐户余额,如果我这样做的话:

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.您示例中的映射操作符不执行任何操作.

Angular相关问答推荐

从Angular 14更新到15个多边形.ts问题

Angular 客户端应用程序无法从停靠容器解析后端服务的地址

具有多重签名的Angular Mocking Service

未触发HTTP拦截器

Rxjs重置执行后的可观察延迟并重新调度Angular

如何包装NGB carousel ?

AOS中的数据绑定--可能吗?

如果Rxjs间隔请求仍在进行,则不应重置,但如果用户更改输入,则应重置

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

显示带有数组子列的标题表 - Angular

Observable .do() 运算符 (rxjs) 的用例

使用 NPM 安装 Font Awesome 5

将查询参数附加到 URL

如何在Angular 4中为数字管道指定语言环境千位分隔符

visibility:hidden

Angular 4 设置下拉菜单中的选定选项

Angular 2+ ngModule 中导入/导出的作用

No provider for Router?

此类通过 SomeModule -> SomeComponent 对消费者可见,但不会从顶级库入口点导出

如何将 @Input 与使用 ComponentFactoryResolver 创建的组件一起使用?