DevGang
Авторизоваться

Совместное использование Observables: связь между компонентами

Предположим следующий случай: у вас есть проект Angular / Ionic, который имеет несколько компонентов, которым требуется один и тот же ресурс. Когда приложение загрузится, компоненты начнут получать свежие данные из серверной части. Следовательно, вы, вероятно, увидите несколько одинаковых вызовов на вкладке Сеть.

Я создал макет проекта, чтобы смоделировать проблему. Я создал 3 компонента, которые практически идентичны, и поместил их дважды в родительский компонент. Когда они инициализируются, они пытаются получить массив книг из серверной части.

... 
getBooks(){
    return this.http.get('getbooksUrl');
}
...

Результат - 6 идентичных вызовов API.

Одним из простых решений является обмен наблюдаемыми. Share - это оператор rxjs, который вы можете легко реализовать.

  private _ongoingObservable;
  
  getBooks(){
    if(this._ongoingObservable){
      console.log('shared obs')
      return this._ongoingObservable;
    }
    
    this._ongoingObservable = this.http.get('someurl')
    .pipe(
      share(), 
      finalize(()=>{
        this._ongoingObservable = null;
      }));

    console.log('first time');
    return this._ongoingObservable;
  }

То, что мы делаем здесь, довольно просто. Мы создали переменную, чтобы сохранить ссылку на текущий запрос. В методе мы сначала проверяем, имеет ли оно значение, если оно его возвращает. Если нет, это означает, что нет активного запроса. Сделайте запрос и поделитесь им, чтобы он стал многоадресным.Также обязательно удалите ссылку, как только мы получим ответ на запрос.

Следовательно, мы очищаем переменную в операторе финализации. Это не кеширует значение, а только предотвращает множественные идентичные запросы.

Вот результат:

#Angular #RxJS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу