Как: повторно отправить HTTP-запрос при использовании асинхронного канала

Question

Есть ли способ отправить HttpRequest при использовании асинхронного канала в шаблоне, как это?

myObservable$ = this.http.get('api');

<div *ngFor='let item of myObservable$ | async'>{{item}}</div>

Answer 1

Использование async pipe - очень удобный способ работы с Observables, потому что он управляет отпиской для вас. Это означает, что если myObservable$ ссылка изменится, сработает ChangeDetection и async отменит текущую подписку и подпишется на другую. Таким образом, вы можете просто переназначить новое значение myObservable$ и HttpRequest будет отправлено снова.

Проверьте сами:

ngOnInit() {
  setTimeout(() => this.myObservable$ = this.http.get('another-endpoint'), 2000)
}

Answer 2

Вам необходимо выдать новое значение в Observable, если вам нужно повторно получить данные по определенному событию, вы можете поместить событие в Observable и использовать switchMap для извлечения триггера:

event$ = new BehaviorSubject(true);

myObservable$ = this.event$.pipe(
  switchMapTo(this.http.get('api'))
);

refetchData() {
  this.event$.next();
}

Answer 3

Это не лучшая практика.Асинхронный канал предназначен для использования с потоками, использование его с наблюдаемыми триггерами, такими как вызовы http, может иметь нежелательные побочные эффекты.Я предлагаю сделать http-вызов в сервисе и подписаться на ваш компонент.Если есть конкретная причина, по которой вы хотите использовать асинхронный канал, я предлагаю иметь отдельный объект BehaviorSubject и делать что-то вроде этого ...

_myBehaviorSubject = new BehaviorSubject(null);
myBehaviorSubject$ = this._myBehaviorSubject.asObservable();

myObservable$ = this.http.get('api').pipe(tap(items => this._myBehaviorSubject.push(items)));

Затем в вашем компоненте вы можете подписаться на это каждый развы хотите сделать http-вызов, и в своем html-шаблоне подпишитесь на myBehaviorSubject $, используя асинхронный канал.