Уменьшение одного и того же http сетевого вызова на нескольких компонентах

Question

У меня есть 2 компонента UsersComponent и HelloComponent.

Я звоню одной и той же службе с одинаковыми вызовами API на оба компонента.

Но я хочу, чтобы, если UsersComponent вызывал API чем HelloComponent не должен вызывать API, он должен получить значение от UsersComponent.

В настоящее время сетевой вызов происходит на обоих компонентах.

Есть ли способ сделать. Пожалуйста, помогите.

Ссылка на Stackblitz:

Stackblitz

Answer 1

Это называется холодной наблюдаемой . Всякий раз, когда вы подписываетесь на него, он отправляет новый HTTP-запрос.

Потому что каждый раз, когда вы возвращаете новый http.get вызов.

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

@Injectable()
export class AppService {

  private data$: Observable<any>;

  constructor(private http: HttpClient) {}

  getData() {
     if (!this.data$) {
        this.data$ = this.http.get('https://jsonplaceholder.typicode.com/posts');    
     }
     return this.data$;
  }
}

Однако вы также можете использовать оператор rx js share.

Answer 2

Создайте подобный сервис,

@Injectable()
export class DataService {
  public data = null;
}

добавьте его в список поставщиков в app.module.ts

и добавьте его в конструктор обоих компонентов, например,

export class UserComponent {
    constructor(private dataService: DataService)
}

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