Обновить DOM после изменения конечной точки API в Angular - PullRequest
Новая
       3

Обновить DOM после изменения конечной точки API в Angular

1 голос
/ 28 мая 2020

У меня есть служба NG, которая возвращает такие объекты: 

getIndicators(): Observable<Indicator[]> {
    return this.http.get<Indicator[]>('http://localhost:1338/test')
  }

В компоненте @NgOnInit я сейчас вызываю службу функции следующим образом: 

const source = timer(1000, 59000);
    //output: 0,1,2,3,4,5......
    const subscribe = source.subscribe(val => {
      this.myService.getIndicators().subscribe(result => (this.indicators = result))
      console.log('timer hit')
    });

Так что обновлять DOM автоматически с помощью таймера rx js, однако это далеко не оптимально. Если я получу функцию getIndicators моей службы на ngOnInit (без таймера), мне нужно будет обновить sh DOM, чтобы получить новые значения, которые были обновлены в конечной точке API, следовательно, таймер.

Я знаю, что это должно быть возможно решить с помощью каких-то наблюдателей, после обновления api обновится DOM. Я новичок в RX JS и хотел бы получить указания или примеры.

Заранее спасибо, Сванте

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Интерфейс, к сожалению, ничего не знает о данных на сервере, не получая их. Поэтому ему придется делать повторяющиеся вызовы, чтобы обновлять данные. Однако вы можете использовать setTimeout() в подписке для повторного запуска вызова. 

dataStream: any;

ngOnInit() {
  this.triggerStream();
}

triggerStream() {
  if (this.dataStream) {
    this.dataStream.unsubscribe();          // <-- cancel impending requests
  }
  this.dataStream = this.myService.getIndicators().subscribe(
    result => {
      this.indicators = result;
      setTimeout(() => { this.triggerStream() }, 60000);        // <-- fetch again in 60 seconds
    },
    error => {
      // handle error
      setTimeout(() => { this.triggerStream() }, 5000);        // <-- fetch again in 5 seconds
    }
  );
}

Одним из преимуществ этого метода является то, что время повторной загрузки может отличаться для ответа и ошибки. Например, получить еще раз через 60 секунд, если получен действительный ответ, или получить еще раз через 5 секунд.

Но вам все равно придется вручную запускать вызов каждый раз, когда вам нужно обновление с сервера. Чтобы избежать этого, вы можете изучить События, отправленные сервером . Они разработаны для таких ситуаций, когда от сервера требуется единый непрерывный поток данных, и он не ожидает никаких данных от клиента.

0 голосов
/ 28 мая 2020

Вы можете использовать mergeMap. Внутри ngOnInit делаем так: 

timer(1000, 59000).pipe(
  mergeMap(() => this.getIndicators())
).subscribe();

getIndicators(){
   // your api call
}
...