Как периодически тянуть данные с сервера при помощи rxjs?

Вопрос-ответ JavaScript
1

Подскажите пожалуйста как в angular2 при помощи rxjs через каждые 5 секунд получать данные с сервера. Вот мой код, он работает, но есть проблема.

компонент:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/switchMap';

private getUserTasks(userId): void {
    Observable
      .interval(5000)
      .switchMap(() => this.tasksService.getUserTasks(userId))
      .subscribe(
          data => {
              this.userTasks = JSON.parse(data);                 
              console.log('userTasks', this.userTasks);
          }
      )
};

сервис:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

@Injectable()
export class TasksService {
  constructor(private http: HttpClient) { };
  getUserTasks(userId): Observable<any> {
  	return this.http.get('http://127.0.0.1:8000/app_tasks/user_tasks?user_id=' + userId);
  };
}

Проблема в том, что первый запрос отправляется после того как пользователь подождёт 5 секунд, глядя в белый экран. А мне нужно чтобы первый запрос отправлялся сразу после загрузки страницы.

Я мог бы повесть индикатор или спиннер, но дело в том, что, возможно, период придётся увеличить до 60 - 120 сек. Всё это время смотреть на индикатор неприятно пользователю

2

TLDR Замени .interval(5000) на .timer(0, 5000).

Используй https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/timer.md вместо interval.

Из документации:

Rx.Observable.timer(dueTime, [period], [scheduler])

Returns an observable sequence that produces a
value after dueTime has elapsed and then after
each period.

Возвращает observable, которое порождает первое значение после dueTime а последующие значения - через каждый период.

1 лайк