来自ngOnInit中的服务的Angular 4轮询/流数据

Posted 2023-03-13

【中文标题】来自ngOnInit中的服务的Angular 4轮询/流数据

【英文标题】：Angular 4 Poll / Stream Data from service within ngOnInit

【发布时间】：2017-10-31 07:54:31

【问题描述】：

我想使用 AngularJS 4 从 API 流式传输数据。当我第一次调用 API 时没有数据，但最终会在 15 - 30 秒内返回更多结果。

这是我的组件：

export class ResultsComponent implements OnInit 
    results: Results;

    constructor(
        private searchService: SearchService,
        private route: ActivatedRoute
    ) 

    ngOnInit(): void 

        this.route.params
            .switchMap((params: Params) => 
        this.searchService.getResultsObservable(params['searchKey']))
            .subscribe(data =>  this.results = data; );

这是我的服务调用：

我正在使用上面的 Observable 调用，但我也包含了 Promise 调用。

getResults(searchKey: string): Promise<Results> 
    const url = `$this.apiUrl/$searchKey/0`;
    return this.http.get(url)
            .toPromise()
            .then(response => response.json() || )
            .catch(this.handleError);


getResultsObservable(searchKey: string): Observable<Results> 
    const url = `$this.apiUrl/$searchKey/0`;
    return this.http
            .get(url)
            .map(response => response.json() || );

我认为我需要使用 Observable 调用，但我不确定我需要如何处理组件内的调用。

【问题讨论】：

AngularJS 和 Angular 4 是两个不同的框架。你在这里使用的是Angular 4。您可能想要编辑您的问题并将AngularJS 替换为Angular.

@mridula 谢谢！我已经更新了问题。

您遇到的具体问题是什么？从阅读您的问题中我真的无法判断:(。您从组件中观察到的调用处理看起来不错。

@Nehal 我不确定如何将我的 SearchKey 作为参数传递，然后将结果流回我的视图。目前，我只在 ngOnInit() 期间调用该服务一次，我应该以不同的方式执行此操作吗？我的组件如何知道继续检查更多数据？

【参考方案1】：

如果我正确理解您的问题，您必须在特定时间间隔（例如 15 秒）后继续从服务器获取数据，您可以试试这个：

private keepGettingDataFromServer() 
    this.intervalLoop = setInterval (() => 
            this.getResultsObservable.subscribe(res => 
                //handle the response here
            )
        
    , 1500)


getResultsObservable(searchKey: string): Observable<Results> 
    const url = `$this.apiUrl/$searchKey/0`;
    return this.http
        .get(url)
        .map(response => response.json() || );


ngOnDestroy() 
    if (this.intervalLoop) 
        clearInterval(this.intervalLoop);
    

我也可以想到另外一种方式，如果你的服务器是ASP .NET，你可以使用SignalR订阅频道，收到预期的数据时收到通知。

【讨论】：

感谢 @mridula 让我走上正轨！

【参考方案2】：

感谢@mridula 让我走上正轨。经过一番研究，我发现最好的解决方案是使用 IntervalObservable：

subscription: Subscription;

ngOnInit() 
    this.route.params.subscribe(
      (params: Params) => 
        this.subscription = this.getResults((params['searchKey'])).subscribe(
          (response) => 
            console.log(response);
            //your business logic for each loop
            //once your are done
            this.stopInterval();
        
      
    );
  
);

getResults(searchKey: string): 
      return IntervalObservable
      .create(1000) //1 second interval
      .flatMap(() => 
      return this.http.get('[API_URL]/' + searchKey).map(response => response.json());
  );


stopInterval()
    this.subscription.unsubscribe();