Fetch Data from an HTTP Server in a React Native Application using fetch or axios
In this lesson we’ll use fetch to get data from an HTTP server, and store it in state in our React Native application. fetch works almost identically on the web and React Native - with the possible exception of how it handles cookies. We’ll also take a look at axios - which is an alternative to fetch.
Instructor: [00:00] Let's remove this hard-coded list of restaurants and add a componentDidMount lifecycle method, where we want to make an HTTP call. We can use Fetch in React Native just like on the web. I'll make a call to a small local server that I have running that will return a list of restaurants.
[00:19] On the iOS simulator, I can use localhost, but on the Android emulator, it has its own IP address, so localhost will not refer to my PC. Instead of localhost here, you will need your computer's IP address on your local network.
[00:33] The restaurant's return is JSON, so just like on the web, we have to parse that response as JSON. Then we can use the result. In this case, that means by setting local state.
[00:45] Let's make sure that state starts as an empty array. Then we can use the state, instead of the old hard-coded list, as the data for FlatList.
[00:55] When we reload that, we see the HTTP call being made and then the list of restaurants pop into place. Fetch is built in and works great in most cases, but you may want an additional option. In particular, I've had trouble with how Fetch handles cookies on React Native.
[01:12] Let's npm install Axios, which is an alternative to Fetch. We can import Axios from Axios and use it instead of Fetch to make an HTTP request. Axios parses the response as JSON by default, so we don't need to parse the results anymore. The result comes back as an object. To get the restaurants here, we'll have to access the data key on that object.
[01:39] When we reload now, we're using Axios to do the HTTP get request.
@subhash: From android, try accessing it from your local IP instead of localhost; find the ip of your computer and then use that - does that work?
If you're still having trouble: are you able to fetch it from the browser? So, if you copy the url that you're using with axios or fetch and paste it in a browser, then you should get the json back; if not, then it's a server issue (or you have the wrong url) - if so, then it's a client/app issue.
Hi Chris, I am having trouble fetching remote data even I have used json-server to get the restaurants.json file from local server but still empty array is being returned. I tried many things and even axios is also not returning the data from the server. Is there any issue at android side that we can access localhost address so what are the steps to access the local pc address with port as I have difficulty in this regard. Please assist.
Below is my sample restaurants.json file {"restaurants":[ {"name": "React Cafe", "address": "123 St. Chappel St." }, {"name": "Fancy Restaurant", "address": "799 Riverside Road" }, {"name": "Asiad Veggie Bites", "address": "550 marcus street" } ]}