在 ReactJS 中安排 API 调用

Question

我有一个基于反应的网络应用程序，它从 Jenkins API 检索数据。在 componentDidMount() 函数中，我调用了第一个 API，它启动了 API 调用流程。然后我将使用 API 中的数据渲染组件。

Jenkins 服务器每天早上 7 点开始构建每个项目。因此，我想每天晚上 8 点左右从 React 调用这些 API。

我们可以安排 React 在一天中的特定时间调用这些 API 并获取它之前提到的更新数据吗？或者刷新浏览器等会产生新的 API 数据？我是 React 新手，非常感谢您为实现这一目标提出的建议。

Answer 1

您在componentDidMount() 中正确使用了您的 API 调用。您可以在挂载时使用 setTimeout() 等到 20:00，然后每隔 24 小时使用 setInterval() 再次触发该事件。

比如：

componentDidMount() {
  const currentTime = new Date().getTime();  //current unix timestamp
  const execTime = new Date().setHours(20,0,0,0);  //API call time = today at 20:00
  let timeLeft;
  if(currentTime < execTime) {
    //it's currently earlier than 20:00
    timeLeft = execTime - currTime;
  } else {
    //it's currently later than 20:00, schedule for tomorrow at 20:00
    timeLeft = execTime + 86400000 - currentTime
  }
  setTimeout(function() {
    setInterval(function() {

      //your code

    }, 86400000);  //repeat every 24h
  }, timeLeft);  //wait until 20:00 as calculated above
}

换句话说，它将：

1. 计算现在和下一个20:00 o'clock 之间的时间差。
2. 等到20:00 和setTimeout()。
3. 将触发器设置为正好 24 小时（即 86400000 毫秒）以重复 setInterval() 中的代码。

无论您何时启动 React 应用，这都会起作用。