在 ReactJS 中安排 API 调用

Posted 2023-02-22

【中文标题】在 ReactJS 中安排 API 调用

【英文标题】：Schedule an API call in ReactJS

【发布时间】：2018-06-24 01:32:28

【问题描述】：

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

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

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

【问题讨论】：

只需在您的组件中使用setTimeout。

我想更好的建议是setInterval，它可以让您在设定的时间间隔内检索数据，而不仅仅是一次

@AndreiMatracaru 也许setTimeout() 的时间跨度直到晚上 8 点，然后setInterval() 24 小时；）

@channae，下面的解决方案对您有用吗？如果是这样，请考虑将我的答案标记为“已接受”和/或通过投票以表明它是有用的。谢谢

@Chris 我试过这个，不幸的是这没有用。我尝试放置一个 console.log 并没有触发。浏览器的开发者控制台中也没有日志。

【参考方案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

换句话说，它将：

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

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

【讨论】：

不幸的是，我试过了，但没用。我尝试放置一个 console.log 并没有触发。浏览器的开发者控制台中也没有日志。

@channae 很奇怪，因为它对我有用。你能再测试一下吗？对于测试，将触发时间设置为未来 1 分钟（将 20,0,0,0 替换为您的本地时间 + 1 分钟），然后将 86400000 替换为 1000 进行测试。也可能只是用控制台日志或类似内容替换您的 API 调用。

我按照您的建议尝试将 86400000 替换为 1000。我可以看到它每秒触发一次。但它不会等待未来的时间，它只是在启动项目时每秒触发一次。

我正在检查//您的代码块期间的时间，时间如下，当前时间 1516343495845 执行时间 1516344000000 我已将 exe 时间设置为 12.10，现在时间约为 12.03

我改成timeLeft = execTime - currentTime;显然剩下的时间是负数。请接受我的编辑，我会接受答案。谢谢