为啥我们应该在 Angular 中使用 subscribe() 而不是 map()？

Posted 2023-03-07

【中文标题】为啥我们应该在 Angular 中使用 subscribe() 而不是 map()？

【英文标题】：why should we use subscribe() over map() in Angular?为什么我们应该在 Angular 中使用 subscribe() 而不是 map()？

【发布时间】：2017-07-09 15:03:11

【问题描述】：

我试图利用 angular2 中的 observables，但对为什么我应该使用 map() 而不是 subscribe() 感到困惑。 假设我从 webApi 获取值，像这样

  this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')

现在使用subscribe(success, error, complete) 我可以获取成功回调的所有值，并且可以返回完整回调的值。如果我可以完成所有这些功能，那么map() 需要什么？它有什么好处吗？

简而言之，为什么要这样写：

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .map(r=>)
    .subscribe(value => 
    , error => error, () => 
);

他们可以在没有地图功能的情况下简单地写这个：

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .subscribe(value =>         
    , error => error, () =>            
);

【问题讨论】：

我已经更新了我的问题，请看一下

.map(r=>) 将导致未定义的值。如果您正在寻找合理的答案，请以合理的方式解释您的情况。

【参考方案1】：

如果你想返回一个Observable，其他代码可以订阅，但你仍然想在当前方法中操作数据事件，使用map。

observable 的实际用户需要subscribe()，因为没有subscribe()，observable 根本不会被执行。 （forEach() 或 toArray() 可能还有其他人也可以执行 observable 而不是 subscribe()）

subscribe()返回一个不能订阅的Subscription，但是可以用来取消订阅。

map() 返回一个可以订阅的Observable。

【参考方案2】：

将地图视为转换响应的中间件。

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
.map(r=>r.json())
 .subscribe(result => 
              // here result would have json object that was parsed by map handler...
            ,failurCallback,completeCallback)

subscribe 用于调用 observable，请阅读 cold-vs-hot-observables 上的好文档

【参考方案3】：

您需要subscribe 来运行您的异步请求。如果您只设置map - 不会触发任何请求。你可以查一下。

使用map 预处理您的数据的良好做法，因为许多订阅者可以使用您的结果。因此，您无需为每个客户端（订阅者）添加预处理，而是为所有客户端准备单个数据模式的单个输出。

【参考方案4】：

.map() 是一个 rxjs 运算符，它将以数组 [] 或 .json() 形式显示结果

https://www.learnrxjs.io/operators/transformation/map.html

【参考方案5】：

Observables 是流，它们被设计为以函数流的形式编写。您应该使用 RxJS 操作，因为它是实现对可观察对象的订阅的“功能”方式。当我们从 Observable 流之外获取数据时，通常会发生这种情况。

这是一个强制同步工作的异步操作。

bad_example() 
  let id;
  this.obs.subscribe(param => id = param['id']);
    this.get(id).subscribe(elem => this.elem = elem);

这是一个按预期工作的异步操作。 （作为流）

good_example() 
  this.obs
    .map(param => param['id'])
    .switchMap(id => return this.get(id))
    .subscribe(elem => this.elem = elem);