Dispatch Promises On An Interval
In this guide, you will learn how to set up polling in your React app via dispatching JavaScript promises on an interval.
Nov 7, 2020 • 4 Minute Read
Introduction
Often when building a web app, it is necessary to make HTTP requests or perform some sort of asynchronous action on an interval. Making HTTP requests to collect data on an interval, or polling, is an important topic to understand as a web developer.
In this guide, you will learn how to set up polling in your React app via dispatching JavaScript promises on an interval. The Promise API allows you to model asynchronous actions within your codebase. You will learn how promises, coupled with the setInterval method, allow you to easily poll external APIs.
Let's dive in!
Promises On An Interval
As mentioned, dispatching promises on an interval is all about combining the Promise API with the globally available setInterval method.
Promises are used to model asynchronous actions in your JavaScript code. In this example, you will see how promises are used with the built-in JavaScript Fetch API to create our HTTP requests.
The setInterval method works by passing both a function and a time (in milliseconds). When an interval is created, the function passed to the interval is then fired off every n milliseconds!
Below, you will see some example code that implements polling in a React component. The code below requests reptile data every five seconds when the component mounts and then stops polling when the component is unmounted.
class ReptileViewComponent Extends React.Component {
constructor(props) {
super(props);
this.interval;
this.state = {
reptiles: []
}
}
componentWillMount() {
// Make the first request and then start polling.
this.requestLatestReptiles();
this.startPolling();
}
componentWillUnmount() {
this.stopPolling();
}
requestLatestReptiles = () => {
fetch(this.props.reptileUrl)
.then(response => response.json())
.then(reptiles => this.setState({ reptiles }));
}
startPolling = () => this.interval = setInterval(this.requestLatestReptiles, 5000)
stopPolling = () => {
if (this.interval) {
clearInterval(this.interval);
}
}
// ....
}
The first part of this code, within the constructor, sets up the initial reptiles state and creates an internal component property for keeping track of the interval that is to be created.
The componentWillMount component lifecycle method uses the requestLatestReptiles and startPolling methods to make an initial request for data and start polling. This is necessary because when you use setInterval in JavaScript, it will not immediately call the function that you pass to it.
From here, the componentWillUnmount component lifecycle method is used to call the stopPolling method, which uses the global clearInterval function to stop polling by clearing the created interval.
Wow! Just like that, you have created a simple component that is set up to dispatch promises on an interval. You can now poll an external API in order to ensure the latest data is always populated in the UI.
Conclusion
Polling is a foundational skill to have as a web developer and a programmer in general. Combining JavaScript promises with setInterval makes it easy for you to set up polling in your app.
Polling is a great skill to have, but it is also a naive way of ensuring your app has the latest data that is available. Other alternatives to polling, such as server-sent events and web sockets, allow you to keep open connections to a server so that multiple HTTP requests are not continuously being fired off. These sorts of APIs allow you to have real-time data streaming in your app. For more information, check out the server-sent events documentation and the web sockets documentation.