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

他们都为资源注入了相同的服务：

@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

Angular-如何检查未决请求？

1 个答案: