在获取数据时在setInterval()中使用componentDidMount的一种更有利于性能的方法

Question

我在这里为找到正确的解决办法而努力奋斗。目前，我正在使用setInterval()“轮询”我的服务器并检索一个对象数组。为了获取数据，我使用axios。以下是相关的功能：

  componentDidMount(){
    this.timer = setInterval(() => [this.getData(), this.getCustData()], 1000);
  }

  componentWillUnmount(){
    this.timer && clearInterval(this.timer);
    this.timer = false
  }

  getData = () => {
      axios.get('http://localhost:3001/api/v1/pickup_deliveries')
        .then((response) => {
            this.setState({
              apiData: response.data
            })
          })
        .catch((error)=>{console.log(error);});
  }

    getCustData = () => {
      axios.get('http://localhost:3001/api/v1/customers')
        .then((response) => {
            this.setState({
              custData: response.data
            })
          })
        .catch((error)=>{console.log(error);});
  }

应用程序运行速度太慢，而且经常会挂起服务器，从而使整个应用程序无法使用。目前，它正在获取的数组已经覆盖了1000+对象，而且这个数量每天都在增加。如果我在不轮询服务器的情况下获取数据，我的应用程序的感觉就是日日夜夜。我不太清楚答案是什么，但我知道我所做的不是正确的方法。

这就是用setInterval()来嘲弄“轮询”的本质吗？或者，是否有一种方法只在state更改时获取数据？

如果我需要实现SSE或WebSockets，我将经历一些麻烦，但我想看看是否有一种方法可以修复我当前的代码以获得更好的性能。

谢谢你听我说完。

Answer 1

在前端，我的建议是不要使用setInterval，而是使用setTimeout。

使用setInterval，您的应用程序可能会发送另一个请求，即使之前请求的响应尚未恢复(例如:需要超过1秒)。最好，您应该只在收到前一个响应后1秒发送另一个请求。

componentDidMount() {
  getData();
}

getData = () => {
  fetch().then(() => {
    updateState();

    // schedule next request
    setTimeout(getData, 1000);
  });
}

您还应该尝试减少需要在前端进行的更新的数量，例如通过减少数据的数量。

但是，我认为最重要的是重新考虑应用程序的设计。轮询只会变得更大的大型JSON不是一个可伸缩的设计。这对服务器和客户端都不利。

如果您要做的是将服务器端的任何更改通知客户端，则应该查看WebSocket。一个简单的想法是浏览器应该建立到服务器的WS连接。在对服务器进行任何更新时，服务器不应该发送整个数据，而应该只向客户端发送更新。然后，客户端将更新自己的状态。

例如，假设有两个用户正在打开相同的页面，一个用户通过添加一个新的产品进行更改。服务器将收到此请求并相应地更新数据库。它还将向所有打开的WebSocket连接(添加产品的一个连接除外)广播一条消息，其中包含如下所示的简单对象：

{
  "action": "INSERT",
  "payload": {
    "product": {
      "id": 123123,
      ... // other product data
    }
  }
}

其他用户将使用此数据更新自己的状态，以便与服务器匹配。