Question

我正在尝试用一堆重复的代码来清理我的一个项目，我从多个组件中多次调用我的后端，这真的会减慢我的程序。

以前，ngOnInit（）方法中的每个组件都有类似的内容，以便初始化一组服务：

 this.http.get(this.ds.services_URL).map((res)=>res.json()).subscribe(
      (data) =>{
        this.Services=data;
      });

我想要做的是拥有一个服务，使http调用一次，然后我的组件可以请求我的服务获取数据。

我在我的服务中尝试过这样的事情：

private loadServices()
{
  this.http.get(this.services_URL).map((res)=>res.json()).subscribe(
        (data) =>{
          this.serviceO=new Observable(observer=>{
          setTimeout(()=>{
            observer.next(data);
            observer.complete();
          },1000);
      });
   });
}

serviceO是一个Observable，不同的组件会订阅它而不是http.get结果。

这里的问题是（除了我不确定如何实际设置一个Observable的值），我们实际上是异步重新定义整个Observable，所以Observer实际上不可能有对可观察者的引用（我得到＆＃34;无法读取属性＆＃39;订阅＆＃39;未定义＆＃34;种类异常）

看到我面临的问题，我认为我没有朝着正确的方向发展，所以有谁知道如何实现我想要实现的目标更好的方向？

Answer 1

我通过共享一个observable并将结果存储在服务中来解决这个问题。每当组件需要该数据时，它就可以使用存储的结果而不是发出新的请求（https://plnkr.co/edit/M9ZIViYhSbKzPlzKXC7H）

＆＃13;

export class Service {
  observableShare: Observable<string>; // store the shared observable
  observableResult: string; // store the result of the observable when complete
  
  constructor(private http: Http){}
  
  getData(){
    if(this.observableResult){ // if result has already been found (api has completed) return result
      // create dummy observable and return results
      return new Observable<string>(observer => {
        observer.next(this.observableResult);
        observer.complete();
      })
    }else if(this.observableShare){ // else if api is still processing, return shared observable
      return this.observableShare;
    }else{ // else api has not started, start api and return shared observable
       this.observableShare = this.http.get('url')
        .map(res => {
          this.observableResult = res; // store result in service
        
          console.log('observable sequence', res); // note, this only runs once even though there are 3 separate subscribes
          return res;
        })
        .share(); // share observable sequence among multiple subscribers
      
      return this.observableShare;
    }
    
   
  }
}

＆＃13;

所以这里发生的是调用getData（）的第一个组件启动http请求。如果另一个组件需要之前的数据，请求完成后，将传递共享的observable进行监听。这可确保不会触发多个http请求（对于相同的数据）。最后，如果组件调用getData（）并且http请求已经完成，则getData（）将使用存储的值创建一个observable。现在，多个组件只能使用一个http请求订阅observable。

在Angular 2中的Observable.subscribe（）中声明一个Observable

1 个答案: