Как отправлять GET-запрос с заданной периодичностью?

Question

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

Пробовала сделать через setInterval(), но в этом случае, появляется ошибка core.js:1673 ERROR TypeError: Cannot read property 'get' of undefined

app.component.html:

<app-quotes-table [quotes]="quotes"></app-quotes-table>

app.component.ts:

import { Component } from '@angular/core';
import { Quote } from './shared/quote.model';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
quotes: Quote[];

constructor(private http: HttpClient){

setInterval(function(){
  this.http.get('localhost:8080/quotes').subscribe((data:Quote[]) =>{
              this.quotes = data;
              });
    }, 1000);

  }
}

Answer 1

В данном случае функция, которую Вы передали в setInterval будет исполняться в другом контексте, то есть её this не будет ссылкой на компонент, чтобы обратиться из неё к свойствам Вашего компонента, надо привязать её контекст выполнения:

setInterval((function () {
  this.http
    .get('localhost:8080/quotes')
    .subscribe((data:Quote[]) => { this.quotes = data; });
}).bind(this), 1000));

Также, можно использовать стрелочные функции, они всегда связываются с текущим контекстом:

setInterval(() => {
  this.http
    .get('localhost:8080/quotes')
    .subscribe((data:Quote[]) => { this.quotes = data; });
}, 1000));

Второй вариант предпочтительнее, вызов функции с bind -- не самая быстрая вещь.

БЛОГ НА HUSL

Как отправлять GET-запрос с заданной периодичностью?

Ответы (1 шт):