使用 Angular 6 中的 subscribe 在间隔中调用和等待

Posted 2023-02-22

【中文标题】使用 Angular 6 中的 subscribe 在间隔中调用和等待

【英文标题】：call and wait in interval using subscribe in Angular 6

【发布时间】：2019-02-16 01:50:51

【问题描述】：

我每 10000 次调用一个方法。 我想让这个函数getAllNotificationsActed0() 每 10 秒调用一次，如果数据不在这个时间间隔内，就不要再调用这个函数。如果10秒内收到数据则调用该函数，如果10秒内没有收到数据则不调用而是等待。

service.ts

public NotifGetAllActedNoActive(): Observable<Notifications[]> 
  let headers = new Headers();
  headers.append('x-access-token', this.auth.getCurrentUser().token);
  return this.http.get(Api.getUrl(Api.URLS.NotifGetAllActedNoActive), 
    headers: headers
  )
    .map((response: Response) => 
      let res = response.json();
      if (res.StatusCode === 1) 
        this.auth.logout();
       else 
        return res.StatusDescription.map(notiff => 
          return new Notifications(notiff);
        );
      
    );

组件.ts

ngOnInit() 
  this.subscription = Observable.interval(10000).subscribe(x => 
    this.getAllNotificationsActed0();
  );


getAllNotificationsActed0() 
  this.notif.NotifGetAllActedNoActive().subscribe(notification0 => 
    this.notification0 = notification0;
    if (this.isSortedByDate) 
      this.sortbydate();
    
  );

有什么想法吗？

【参考方案1】：

在你的组件中试试这个：

import  takeUntil  from 'rxjs/operators';
import  Subject, timer  from 'rxjs';

private _destroy$ = new Subject();
ngOnInit() 
    this.getAllNotificationsActed0();

ngOnDestroy() 
    this._destroy$.next();

getAllNotificationsActed0() 
    this.notif.NotifGetAllActedNoActive()
     .pipe(takeUntil(this._destroy$))
     .subscribe(notification0 => 
        this.notification0 = notification0;
        if (this.isSortedByDate) 
            this.sortbydate();
        
        timer(10000).pipe(takeUntil(this._destroy$))
            .subscribe(t => this.getAllNotificationsActed0() );
    );

这是在组件销毁时停止管道的好方法。您可以使用 Subject 对象来实现这一点。您还可以停止任何在组件销毁时必须停止的管道。

【讨论】：

您的回答对我很有用，一个问题：Destroy Timer 对我不起作用。我更新我的帖子。谢谢

请问您有什么想法吗？

我已经更新了我的答案，以实现您的目标。希望我清楚地理解你。

@w.site 如果我的回答有用的话，您可以点赞或接受我的回答吗？

【参考方案2】：

试试这个

你可以保留一个flag来查找等待请求

//New Flag
requestWaiting : boolean = false;

public NotifGetAllActedNoActive(): Observable<Notifications[]> 
let headers = new Headers();
headers.append('x-access-token', this.auth.getCurrentUser().token);
return this.http.get(Api.getUrl(Api.URLS.NotifGetAllActedNoActive), 
  headers: headers
)
  .map((response: Response) => 
    this.requestWaiting = false;
    let res = response.json();
    if (res.StatusCode === 1) 
      this.auth.logout();
     else 
      return res.StatusDescription.map(notiff => 
        return new Notifications(notiff);
      );
    
 );

在间隔内调用方法的地方使用标志

ngOnInit() 
  this.subscription = Observable.interval(10000).subscribe(x => 
     if(!this.requestWaiting)
         this.requestWaiting = true;
         this.getAllNotificationsActed0();
     
  );

  getAllNotificationsActed0() 
    this.notif.NotifGetAllActedNoActive().subscribe(notification0 => 
      this.notification0 = notification0;
      if (!this.isSortedByDate) 
        this.sortbydate();
      
    );
  

已经触发的 observable 将等到收到响应。 希望对你有帮助

【讨论】：

感谢您的回答。我试试这段代码，但是函数NotifGetAllActedNoActive()在这个间隔内没有调用

有什么想法吗？

你在哪里解决你的 observable？

import Observable, Subscription from 'rxjs/Rx';

我可以在服务端使用 Observable.interval(10000) 并且组件继续监视服务以进行数据更改