我是 Angular 和 typescript 的新手，试图了解 HttpClient、observables 和 subscribe
当我在组件的函数中这样做时
console.log(this.http.get('assets/user.json'));
我正在接收一个对象，但如果我将代码更改为
this.http.get('assets/userDetail.json').subscribe(data => this.user = { name: data['name']});
我可以看到网络请求到达了所需的 URL。为什么会这样？我的理解是this.http.get('assets/userDetail.json') 即使我们不订阅响应数据流也会点击 url。
【问题讨论】：
标签： angular typescript rxjs observable angular-httpclient
要了解这件事，很高兴知道有 hot 和 cold 可观察对象 - 冷需要订阅，否则它们不会被解雇，热被解雇 no是否订阅了他们的东西。
Angular 的 HttpClient 返回一个冷的 Observable，所以在订阅之前它不会被触发。要确定 observable 是热还是冷，您需要检查相应的文档，例如参见 HttpClient.post:
构造一个 Observable，订阅后会导致 配置 POST 请求在服务器上执行。
Angular 的 hot observable 的一个例子是例如ActivatedRoute.params - how to use - 你看没有订阅。
observable 是热/冷的事实比仅仅订阅或不订阅有更多的后果：
订阅时，你还应该取消订阅in some cases以避免内存泄漏，另外还有Angular的async pipe，它为你管理订阅；有一篇关于此事的文章：Don't forget to unsubscribe（Angular specific）
Ben Lesh 有一篇关于该主题的完美文章，从一般角度来看：Hot vs Cold Observables（并非特定于 Angular）。
【讨论】：
前面的答案已经解释了为什么没有任何订阅者它就无法工作。因为它是一个冷观察者，所以只有找到至少一个订阅者才会执行。
所以替代方案基本上是：
this.http.get('assets/user.json').subscribe();
【讨论】：
值得一提的是，假设这样的代码并且可以冷观察：
（伪代码）
组件：
ngOnInit(): void {
console.log('Before, in ngInit')
usersService.usersGet();
console.log('After, in ngInit')
}
服务：
public usersGet(){
console.log("I'm in service");
let data = this.http.get('assets/user.json')
console.log("I'm already here")
return data;
}
你会在浏览器的开发工具中看到这样的输出：
但您的后端端点不会接收任何请求。
当您将代码更改为：
ngOnInit(): void {
console.log('Before, in ngInit')
usersService.usersGet().subscribe( x=> {
console.log("I'm inside of subscribe")
console.log(x)
});
console.log('After, in ngInit')
}
输出将是：
【讨论】：
概述：在这段代码 sn-p 中，我使用对整个应用程序可见的可注入对象创建了一个 webapi 服务。我订阅了 http.get 从调用函数返回的 observable。 IView 的结果与 promise 类似的绑定到数据列表。现在可以将 WebApiService 注入到其他组件的构造函数中。
myComponent.component.ts
public data: IDataView[];
调用可观察对象。 this.app.getMyViews('123').subscribe(result=>{this.data=result;});
WebApi.service.ts
@Injectable({ 提供在：“根” })
export class WebApiService
{
constructor(private http: HttpClient,private env: EnvironmentUrlService) { }
getMyViews(id)
{
var path = this.env.urlAddress + '/my_class/GetData/'+id;
return this.http.get<IDataView[]>(path);
}
}
【讨论】：