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

Они оба используют один и тот же сервис для ресурса:

@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