Angular - 如何检查待处理的请求？

Question

我的应用程序中有以下主机组件和一个子组件。

@Component({
  selector: 'ng-host',
  templateUrl: '<div><router-outlet></router-outlet></div>'
})
class HostComponent {
  constructor(
    private ressourceService: RessourceService
  ) {
    this.ressourceService.GetRessource().subscribe();
  }
}

@Component({
  selector: 'ng-child',
  templateUrl: '<div></div>'
})
class ChildComponent {
  constructor(
    private ressourceService: RessourceService
  ) {
    if (this.ressourceService.ressource === null) {
      this.ressourceService.GetOtherRessource().subscribe();
    }
  }
}

它们都为资源注入(inject)相同的服务:

@Injectable()
class RessourceService {
  public ressource: any;

  constructor(private http: HttpClient) { }

  GetRessource() {
    return this.http.get('url').pipe(
      map(response => this.ressource = response.ressource)
    );
  }
  GetOtherRessource() {
    return this.http.get('otherUrl');
  }
}

通常用户会登录，登陆主机组件并自然地浏览应用程序，直到他到达子组件。由于 Host 组件已经实例化，子组件可以检查资源是否已加载，只有在未加载时才加载其他资源。一切正常。

但是如果我重新加载页面，宿主和子组件将同时加载。由于来自宿主组件的请求仍处于待处理状态且服务的资源尚未设置，因此子组件将假定该资源不存在并加载其他资源。

我怎样才能防止这种情况发生？有没有办法检查是否有任何请求仍在等待处理？如果在不同的组件中调用这两个请求，是否可以链接它们？或者我是否需要彻底检查我的应用程序的结构？

Answer 1

您可以在服务中“缓存”响应

@Injectable()
class RessourceService {
  public resource1: any;
  public resource2: any;

  constructor(private http: HttpClient) { }

  GetRessource() {
    if (!resource1)
       return this.http.get('url').pipe(
        map(response => response.resource), //not return response, just response.resource
        tap(response=>this.resource1=response)  //when subscribe store the response
    )
     else
        return of(this.resource1)
  }
  GetOtherRessource() {
    if (!resource2)
       return this.http.get('otherurl').pipe(
        map(response => response.resource),
        tap(response=>this.resource2=response)
    )
     else
        return of(this.resource2)
  }
}

然后，您始终订阅 GetResponse 和 GetResponse2