刷新服务中的数据

Question

API中的数据不断变化。 Angular 中刷新数据的最佳方式是什么？ bitfinex.com API

我有一个服务和组件。在服务中我使用 'get'.

下载数据

服务：

getPrice(){

  return this.http.get('xxx');

}

组件:

ngOnInit() {

   this.getPrices();

    setInterval(() => {
      this.getPrices();
    }, 5000);

  }

  getPrices(){
    this.tick.getPrice().subscribe(prices => {
      console.log(prices);
    });
  }

正如您在组件中看到的那样，我使用 'setInterval' 并每 5 秒刷新一次。

我尝试直接在服务中刷新数据

return interval(5000).pipe(

      // ignore new term if same as previous term
      distinctUntilChanged(),

      // switch to new search observable each time the term changes
      switchMap(() => this.http.get('xxx')),
    );

但是5秒后才显示数据

Answer 1

我曾尝试在 this stackblitz 中重现您的问题，但我做不到。

你能试试这个并告诉我它有什么问题吗（除了服务器端的 CORS，你不能做任何事情）

您的问题可能与此有关：

根据他们的政策，您不能每 5 秒轮询一次 API（您正在对它们进行 DDOSing:P）。您每分钟可以执行约 10 个请求。

试试他们的 websocket api，它在数据发生变化时将数据流式传输给您，而无需从客户端进行轮询（服务器会在新数据可用时向您发送新数据，您只需要处理它）。

Answer 2

1) 如果您不在重定向/页面离开时销毁事件监听器，这将运行在后台运行。

我建议实现一个析构函数。

deregisterListeners() {
    this.eventListeners.forEach(listener => {
        listener();
    });
    _.remove(this.eventListeners); //this is lodash,  it loops through all instances of w/e you're looping through
    clearInterval(this.intervalFunc);
}

然后像这样在 ngOnInit 中添加事件监听器

this.eventListeners.push(this.$scope.$on("$destroy", this.deregisterListeners.bind(this)));
this.intervalFunc = setInterval(() => {
     // your code / function that calls the data here
 });

Answer 3

当您设置每 3 秒刷新一次时，它们会阻塞。 5秒最佳，测试：D

首先，我想在没有 websockets 的情况下学习，因此我的问题是如何做到最好。

Answer 4

return interval(5000).pipe(

  // ignore new term if same as previous term
  distinctUntilChanged(),

  // switch to new search observable each time the term changes
  switchMap(() => this.http.get('xxx')),
);

问题出在这段代码中。 interval(5000) 将在前 5 秒后每 5 秒仅发射一次。这是您观察到的行为。您可以使用 timer(0,5000) 获取以 1 次发射开始然后每 5 秒重复一次的可观察对象。

此外，我不确定 distinctUntilChanged() 应该在这里做什么。 interval(5000) 将每 5 秒发出一个递增的数字，因此该值将始终是唯一的。

switchMap 后面似乎还有一个额外的逗号，您不需要。

刷新服务中的数据

Refreshing data in service

angular

rxjs6