Question

我只需要从服务器请求一些数据，然后在加载应用程序后再使用它

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

问题在于，当应用启动时，许多组件立即请求数据，导致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请求正在进行，它将在500毫秒后再次请求数据，如果请求返回错误，我将Gettingdata重置为false，它可以工作，但感觉又脏又错，我如何订阅进行中的http请求由另一个函数调用者调用？

Answer 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));
}

我希望这会有所帮助。还是可以回答您的问题

Answer 2

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

创建

ng -generate service myservice

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

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

2 个答案: