The second approach to making requests with React is to use the library axios. Instead we see either our data on the page if the request was made successfully, or that there was an error in making the request if not. In it, we set loading to false, so that we no longer see our loading text. finally() callback as function that is called when our promise has resolved successfully or not. Note that you can also display an error message from the error object we put in state by using ssage.

If there's an error we return the text 'Error!'. Here in our example we are putting our error data in state with setError. Using fetch, we need to handle the errors ourselves, so we throw response as an error for it to handled by our catch callback. If it's not an okay response, we assume there was an error making the request. If so, we return our response to pass to the next, then call back as JSON data, since that's the data we'll get back from our random user API. then() callback, we check to see if the response was okay ( response.ok). To do so, we make our request within the useEffect hook, and we make sure to provide an empty dependencies array as the second argument, so that our request is only made once (assuming it's not dependent on any other data in our component). We want to make this request once our React component has mounted. To make a simple GET request with fetch we just need to include the URL endpoint to which we want to make our request. The Fetch API is a tool that's built into most modern browsers on the window object ( window.fetch) and enables us to make HTTP requests very easily using JavaScript promises. The most accessible way to fetch data with React is using the Fetch API. How to Fetch Data in React Using the Fetch API It includes all of the essential information here as a convenient PDF guide. Want Your Own Copy?‬Ĭlick here to download the cheatsheet in PDF format(it takes 5 seconds). Let’s get started! For all of these examples, we will be using an endpoint from the popular JSON Placeholder API, but you can use your own API that you have created (such as a Node API with Express) or any other public API. We will not only cover how to fetch data, but how to best handle loading and error state upon fetching our data. In this tutorial, we will be reviewing five of the most commonly used patterns to fetch data with React by making an HTTP request to a REST API. But which one should you be using for your applications in 2021? There are many ways to fetch data from an external API in React.

Fetch app how does it work