加载栏 http 请求与间隔

Loading bar http request with interval

本文关键字：请求 http 加载      更新时间：2023-09-26

我正在尝试钩接到流 a） 在请求执行之前和 b） 在收到请求之后（例如显示/隐藏加载栏）。在不使用间隔的情况下，我可以将布尔值 isLoaded 设置为 false 并在订阅函数中将其设置为 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')
        );

我是否必须将角度 http.get 方法包装在我自己的可观察量中？或者有没有更好/"更有棱角"的方法？

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

// 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();
  }

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

相关文章：