加载带有间隔的http请求答案

【问题标题】：Loading bar http request with interval加载带有间隔的http请求
【发布时间】：2019-04-12 01:06:18
【问题描述】：

我正在尝试在 a) 执行请求之前和 b) 在收到请求之后连接到流中（例如，显示/隐藏加载栏）。在不使用 interval 的情况下，我可以将布尔值 isLoaded 设置为 false 并在 subscribe 函数中将其设置为 true。

但是如何使用间隔来做到这一点？

Observable.interval(5000).
        timeout(3500, new Error('Server not available.')).
        flatMap(() => this._http.get('http://api.dev/get/events')).
        map(res => (<Response>res).json())
        .subscribe(data => this.events = data,
                   error => console.debug('ERROR', error),
                   () => console.log('END')
        );

我是否必须将 angulars http.get 方法包装在我自己的 observable 中？还是有更好/“更有棱角”的方式来做到这一点？

【问题讨论】：

你看过Angular Loading Bar的实现吗？
是的，我有。但那是 angular1，我正在使用 angular2。
该死，对不起...完全隔开。

标签： javascript angular rxjs

【解决方案1】：

我建议不要使用间隔，因为网络请求可能会延迟并花费更长/更短的时间，然后会/可能使其不一致的间隔。这样做的方法是......

// the import needed is
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private intervalSub: Subscription;
private ngUnsubscribe = new Subject();

 somefunction (){
    // Interval_Time was 5000
     this.intervalSub = interval(Interval_Time)
     .pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
                // call your api and do the request every Interval time
     }
   }

// make sure you have 
  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

您需要 ngUnsubscribe 主题的原因是，如果您远离组件路由，那么它将不会继续轮询。

【讨论】：