javascript - Schedule an API call in ReactJS - Stack Overflow

admin管理员组

文章数量:1343376

I have a react based web app which retrieves data from Jenkins APIs. During the ponentDidMount() function I'm calling the first API which starts the API calling flow. Then I will render the ponent with the data from the API.

The Jenkins server starts building each project at 7.00am every day. Therefore I want to call these APIs from React around 8.00pm everyday.

Can we schedule React to call these APIs and get it's updated data as previously mentioned during a specific time of the day? Or refresh browser etc which results in new API data? I'm new to React so appreciate your suggestions to achieve this.

I have a react based web app which retrieves data from Jenkins APIs. During the ponentDidMount() function I'm calling the first API which starts the API calling flow. Then I will render the ponent with the data from the API.

The Jenkins server starts building each project at 7.00am every day. Therefore I want to call these APIs from React around 8.00pm everyday.

Can we schedule React to call these APIs and get it's updated data as previously mentioned during a specific time of the day? Or refresh browser etc which results in new API data? I'm new to React so appreciate your suggestions to achieve this.

• javascript
• reactjs
• api
• typescript
• jenkins

Share Improve this question Follow edited Jan 18, 2018 at 13:00 Karl Taylor 5,28944 gold badges3939 silver badges6565 bronze badges asked Jan 15, 2018 at 12:03 channaechannae 1,01111 gold badge1414 silver badges2828 bronze badges 5

• Simply use setTimeout within your ponent. – Oro Commented Jan 15, 2018 at 12:08
• I guess a better suggestion would be setInterval, which would allow you to retrieve the data on a set interval rather than just once – Andrei Matracaru Commented Jan 15, 2018 at 12:13
• @AndreiMatracaru Perhaps setTimeout() for the timespan until 8pm, then setInterval() for 24h ;) – Oro Commented Jan 15, 2018 at 12:22
• @channae, Did the solution below work for you? If so, please consider marking my answer as "accepted" and/or by giving it an up-vote to show that it was useful. Thanks – Chris Commented Jan 16, 2018 at 9:10
• @Chris I tried this unfortunately this didn't work. I tried putting a console.log and it didn't trigger. Also there were no logs in the browser's developer console. – channae Commented Jan 18, 2018 at 11:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

You correctly use your API calls within ponentDidMount(). You can use setTimeout() on mount to wait until 20:00 and and trigger that event again with setInterval() every 24 hours after that.

So like:

ponentDidMount() {
  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
}

In other words, it will:

1. Calculate the time difference between now and next 20:00 o'clock.
2. Wait until 20:00 with setTimeout().
3. Set a trigger for exactly 24 hours (i.e 86400000 ms) to repeat the code inside setInterval().

This will work no matter when you start your React app.

本文标签： javascriptSchedule an API call in ReactJSStack Overflow