Как реорганизовать интервал из rxjs, чтобы избежать дублирования кода - PullRequest
Новая
       3

Как реорганизовать интервал из rxjs, чтобы избежать дублирования кода

0 голосов
/ 10 апреля 2019

У меня есть следующий код, который явно нуждается в улучшении.Он использует интервал для повторного запроса http get.Есть ли другой подход rxjs для улучшения этого кода?Причина, по которой я делаю первый http-запрос вне интервала, заключается в том, что я заметил, что интервал сначала задерживается, а затем отвечает данными.Итак, первый запрос обходит задержку. 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Weather } from './interface';
import { Observable } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { interval } from 'rxjs';
export class WeatherComponent implements  OnInit {
  weathers: any;
  response: any;

  private serviceUrl = 'https://api.weather.gov/gridpoints/OKX/36,38/forecast';
  n = 10000;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.response = this.http.get<Weather>(this.serviceUrl );
    this.response.subscribe(
      results => {
        this.weathers = results.properties.periods.slice(0, 2);
      });

    // 5 minute interval
    interval(5 * 60 * 1000).pipe(
      concatMap( () => this.http.get<Weather>(this.serviceUrl) ),
      ).subscribe(results => this.weathers = results.properties.periods.slice(0, 2));
  }

}

1 Ответ

1 голос
/ 10 апреля 2019

Этот ответ уже дает ответ на ваш вопрос, но я оставлю этот ответ, так как он может привести к другим проблемам, если его применять неправильно.

Рефакторинг следующим образом: 

import {Subscription, timer} from 'rxjs';

const MILISECS_IN_5_MINS = 5 * 60 * 1000;
export class FooComponent {
    private timerSub = Subscription.EMPTY;

    ...

    ngOnInit() {
      this.timerSub = timer(0, MILISECS_IN_5_MINS).pipe(
        concatMap(() => this.http.get<Weather>(this.serviceUrl))
        ).subscribe(results => this.weathers = results.properties.periods.slice(0, 2));
    }

    ngOnDestroy(){
      // Unsubscribe to avoid mem. leaks, as the timer stream is infinite
      this.timerSub.unsubscribe();
    }

    ...
  }
...