Promises in ReactJS can be used to handle asynchronous operations like API Requests. Normally, these are utilized in life cycle methods or hooks. A Promise can be in one of the following states: pending, fulfilled and rejected.
Here’s a simple example with the Fetch API in a componentDidMount lifecycle method:
```
class Example extends React.Component {
componentDidMount() {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => this.setState({ data: data }))
.catch(error => console.log(‘Error:’, error));
}
And here’s an example using the newer async/await syntax, within a useEffect hook:
```
const Example = () => {
const [data, setData] = useState(null);
In these examples, ‘fetch’ returns a Promise. The ‘then’ method is a Promise method that accepts two callbacks: one for a fulfilled state, and one for a rejected state. The ‘catch’ method is used to handle any errors.
In the async/await example, the ‘fetchData’ function is an asynchronous function. ‘await’ can be used in this function to pause the function execution until the Promise resolves, then it takes that result and continues executing the rest of the function. If the Promise rejects, it throws an exception which can be caught and handled.
Always remember, nothing in React itself requires you to use Promises or any particular way of handling asynchronous operations. It’s simply a common use case and many find React’s unopinionated nature helpful in these scenarios.
