Как подписаться на текущий 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
255
2

Ответы 2

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

getData () {
    this.query.http.get('url'). subscribe(
    res=> this.data = res,
    err=> console.info(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.info(err));
}

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

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

Kareem Kamal 26.10.2018 08:21

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

ng -generate service myservice

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

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