进行HTTP请求时使用可观察对象和主题

问题描述

我有一个更大的角度应用程序，在这里我经常需要伸出到后端。大多数情况下，我的组件要求使用相同的对象（或资源）。例如，我有一个带有多个ChildComponents的ParentComponent。在这里，我可以轻松地通过@Input和propterty绑定将从ParentComponent.ts文件中获得的数据传递给Children。到现在为止还挺好。但是，如果我有不相关的组件，那么最好的做法是使请求尽可能少，以便每个组件都能通过后端获取对象请求？我知道我必须使用我做的服务，但是目前许多不相关的组件调用相同的http方法，因此使用相同的数据。我猜想可以通过使用主题来防止这种情况，我在Service中订阅它之后，然后可能是.next（data）。但是然后我不知道哪个组件应该进行实际的http调用。感谢您的帮助！

解决方法

仅shareReplay从服务器获取的数据

class MyService {
   data$ = http.get('url.with.data').pipe(shareReplay(1));
}

class MyComponent {
...
  data$ = this.myService.data$;
}

通过这种方式，结果将由使用此数据的第一个组件懒惰地询问，并且它将在所有组件之间共享

,

所有服务都是单例，因此，您可以： 您需要调用该服务，但是如果该服务在过去曾被调用过一次，则只会获取该保存的值，而不会再次调用http来获取新值。

@Injectable({
    providedIn: 'root'
})

export class YourService {
   data; //persistent data
   //mybe you can implement some algorithm to check the time,and if I spend more than "x" 
   time,force it to call and not just check if I have valid data
   getData() {
       if (!this.data) {
           http.get('url.com').subscribe((data)=>{
              this.data = data; 
              return data;
           });
       } else {
           return of(this.data); //of return a observable with the existint data
       }
    }
}

在每个组件中：

 @Component({
  selector:'',template:''}
);
export class SomeComponent{

data;

constructor(private yourServices: YourService) { }

    chekData() {
        this.yourServices.getData().subscribe(data=>{
        this.data = data;
        });
    }

}