在 Angular 6 和 RxJS 中未发送 Rest-api 调用答案

【问题标题】：Rest-api call is not sent in Angular 6 and RxJS在 Angular 6 和 RxJS 中未发送 Rest-api 调用
【发布时间】：2018-07-19 08:55:20
【问题描述】：

我在组件中有这个方法：

saveItem() {
   return this.itemService.updateItem(this.item)
     .pipe(
       tap((data: any) => {
         this.toastr.success('Saved');
       }),
       catchError((error: any) => {
       return throwError(error.error);
      }
    )
  )
}

这是 itemService 中的函数：

updateItem(item: Item) {
    return this.http.post<any>(this.updateItemUrl, {
        item: item
    });
}

如果我在'return this.itemService.updateItem(this.item)' 行的 saveItem() 中放置一个断点，并且如果我在'return this.http 行的 updateItem() 中放置一个断点。 ..'，它正确地进入断点并停止...... 但是我有以下问题：没有触发rest-api调用，也没有发送http调用..事实上，如果我在.pipe()运算符中放置了一个断点，它不进去。为什么？

【问题讨论】：

您是否在任何地方订阅？要么在组件类中，要么在带有| async的模板中？

标签： angular rxjs ngrx angular-httpclient

【解决方案1】：

Observables（如 http-Requests）只有在至少有一个订阅者时才会激活。

=> 没有订阅者 => 没有 Http 请求

您可以通过

显式订阅

myObservable.subscribe()

或通过 html 模板中的异步管道隐含

<span> {{ myObservable | async }} </span>

热烈的问候

【讨论】：

我添加了： .pipe( ........ ) .subscribe((data: any) => { console.log(data); })' 所以 .pipe()运营商没用？我应该把 show toaster/return 错误的逻辑放在哪里？
'pipe(....)' 操作符用于对流进行操作。它们在流上运行，但并不“启动”它。
因此，例如，如果服务将数字 2 还给我，并且我想在将其显示到视图中之前复制它，我应该使用 pipe()，然后可能使用 map() 来复制数字，然后使用“订阅”我只是将格式化结果返回给视图？还是没用，我应该直接复制到.subscribe()中？还是一样？
从结果来看是一样的。但有时你可能想提供一个返回 observable 的方法。然后你会在方法中使用管道。结果，对于那些订阅您的方法的人，都将获得“修改后的”数据。另外，我个人喜欢将所有数据操作移到管道中并使用管道方法（地图，点击，...）。我认为这样我的代码可读性会更好。