如何订阅正在进行的 http 请求答案

【问题标题】：How to subscribe to an ongoing http request如何订阅正在进行的 http 请求
【发布时间】：2018-10-26 05:42:10
【问题描述】：

我只需要向服务器请求一次数据，然后在加载应用时使用它

getData(callback: Function) {
 if (this.data) {
  callback(this.data);
 } else {
  this.query.http.get('url', res => {
   this.data = res;
   callback(this.data);
  });
 }
}

问题是当app启动时，很多组件同时请求数据，导致30-40个http请求，所以我想出了这个解决方案：

getData(callback: Function) {
 if (this.data) {
  callback(this.data);
 } else if(!this.gettingData) {
  this.gettingData = true;
  this.query.http.get('url', res => {
   this.data = res;
   callback(this.data);
  });
 } else {
  setTimeout(() => {
   getData(callback);
  }, 500)
 }
}

所以如果http请求正在进行，它会在500ms后再次请求数据，如果请求返回错误我将gettingdata重置为false，它可以工作，但是感觉很脏和错误，我如何订阅正在进行的http另一个函数调用者调用的请求？

【问题讨论】：

问题在于，当应用启动时，很多组件同时请求数据，导致 30-40 个 http 请求 - 这不是一个好时机吗？重新考虑你的设计？也许引入一个服务，在根目录下提供，并注入到需要的组件中？

标签： javascript angular typescript http

【解决方案1】：

这个怎么样？

getData () {
    this.query.http.get('url'). subscribe(
    res=> this.data = res,
    err=> console.log(err));
}

然后在整个组件中使用 this.data，如果数据来自子组件，则可以发出数据

@Output() valueChange = new EventEmitter();

private data;

getData () {
    this.query.http.get('url'). subscribe(
    res=> {
          this.data = res;
          this.valueChange.emit(this.data);
    },
    err=> console.log(err));
}

我希望这会有所帮助。或在某种程度上回答您的问题

【讨论】：

谢谢，获取数据用于服务，这样做意味着我必须在每个组件中订阅该事件发射器，在销毁时取消订阅，我考虑过这个选项，但它会在代码中添加了很多混乱

【解决方案2】：

介绍一个管理您的 http 请求的服务。服务基本上是一个单例，可以通过依赖注入来使用。用

创建它

ng -generate service myservice

并通过将myservice 类型的字段声明为组件的构造函数参数来注入它。

【讨论】：