Как подписаться на текущий http-запрос

Мне нужно запросить некоторые данные с сервера только один раз, а затем использовать их, пока приложение загружено

getData(callback: Function) {
 if (this.data) {
  callback(this.data);
 } else {
  this.query.http.get('url', res => {
   this.data = res;
   callback(this.data);
  });
 }
}

проблема в том, что когда приложение запускается, многие компоненты запрашивают данные сразу, что приводит к 30-40 http-запросам, поэтому я придумал следующее решение:

getData(callback: Function) {
 if (this.data) {
  callback(this.data);
 } else if(!this.gettingData) {
  this.gettingData = true;
  this.query.http.get('url', res => {
   this.data = res;
   callback(this.data);
  });
 } else {
  setTimeout(() => {
   getData(callback);
  }, 500)
 }
}

поэтому он снова запрашивает данные через 500 мс, если HTTP-запрос выполняется, если запрос возвращает ошибку, я сбрасываю getdata на false, он работает, но кажется грязным и неправильным, как я могу подписаться на текущий HTTP-запрос, вызываемый другой вызывающий функцию?

проблема в том, что при запуске приложения многие компоненты запрашивают данные одновременно, что приводит к 30-40 HTTP-запросам. - сейчас самое время пересмотреть свой дизайн? может быть, ввести службу, предоставляемую в корневом каталоге и внедренную в требуемые компоненты?
Stavm 26.10.2018 08:04
0
1
255
2

Ответы 2

как насчет этого?

getData () {
    this.query.http.get('url'). subscribe(
    res=> this.data = res,
    err=> console.log(err));
}

затем просто используйте this.data во всем своем компоненте, вы можете выдать данные, если они из дочернего компонента, например

@Output() valueChange = new EventEmitter();

private data;

getData () {
    this.query.http.get('url'). subscribe(
    res=> {
          this.data = res;
          this.valueChange.emit(this.data);
    },
    err=> console.log(err));
}

надеюсь, это поможет. или несколько отвечает на ваш вопрос

спасибо, полученные данные используются в службе, это будет означать, что я должен подписаться на этот эмиттер событий в каждом отдельном компоненте, отказаться от подписки при уничтожении, я рассматривал этот вариант, но это добавило бы много беспорядка в код

Kareem Kamal 26.10.2018 08:21

представьте службу, которая управляет вашими HTTP-запросами. Сервис - это, по сути, синглтон, который можно использовать с помощью внедрения зависимостей. Создайте это с

ng -generate service myservice

и введите его, объявив поле типа myservice в качестве аргумента конструктора вашего компонента.

Другие вопросы по теме