**Course Title:** Building Mobile Applications with React Native **Section Title:** Working with APIs and Data Fetching **Topic:** Fetching data using fetch API and Axios ## Overview of Fetching Data In the previous topic, we discussed the basics of REST APIs and GraphQL. In this topic, we will focus on how to fetch data from APIs using the fetch API and Axios in our React Native application. ### What is the Fetch API? The Fetch API is a modern, promise-based API for requesting resources across the network. It is built into the browser and can be used in React Native applications. The fetch API provides an easy-to-use API for fetching resources asynchronously. ### What is Axios? Axios is a promise-based HTTP client for the browser and Node.js. It provides an easy-to-use API for making HTTP requests in JavaScript. ### Choosing between Fetch API and Axios Both the Fetch API and Axios can be used to fetch data in React Native applications. The choice between the two depends on personal preference and project requirements. * The Fetch API is a built-in API and does not require an additional library. * Axios provides more features such as automatic JSON data parsing and canceling requests. ## Fetching Data using the Fetch API To fetch data using the fetch API, we need to call the fetch function and pass the URL of the resource we want to fetch. ```jsx import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; const FetchExample = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const json = await response.json(); setData(json); } catch (error) { setError(error.message); } }; fetchData(); }, []); return ( <View> {data ? ( <Text>Data fetched successfully!</Text> ) : ( <Text>Error fetching data: {error}</Text> )} </View> ); }; export default FetchExample; ``` In this example, we are fetching data from the JSONPlaceholder API. ### Handling Errors We can handle errors using try-catch blocks. If an error occurs while fetching data, we can display an error message to the user. ### Canceling Requests We can cancel fetch requests by registering an AbortController and using the AbortSignal to cancel the request. ```jsx import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; const FetchExample = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const abortController = new AbortController(); const signal = abortController.signal; const fetchData = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts', { signal, }); const json = await response.json(); setData(json); } catch (error) { if (error.name === 'AbortError') { console.log('Request was aborted'); } else { setError(error.message); } } }; fetchData(); return () => { abortController.abort(); }; }, []); return ( <View> {data ? ( <Text>Data fetched successfully!</Text> ) : ( <Text>Error fetching data: {error}</Text> )} </View> ); }; export default FetchExample; ``` In this example, we are registering an AbortController and using the AbortSignal to cancel the request when the component unmounts. ## Fetching Data using Axios To fetch data using Axios, we need to install Axios in our project. ```bash npm install axios ``` Then, we can use Axios to fetch data. ```jsx import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; import axios from 'axios'; const AxiosExample = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); setData(response.data); } catch (error) { setError(error.message); } }; fetchData(); }, []); return ( <View> {data ? ( <Text>Data fetched successfully!</Text> ) : ( <Text>Error fetching data: {error}</Text> )} </View> ); }; export default AxiosExample; ``` In this example, we are fetching data from the JSONPlaceholder API using Axios. ### Handling Errors We can handle errors using try-catch blocks. If an error occurs while fetching data, we can display an error message to the user. ### Canceling Requests We can cancel Axios requests by creating a CancelToken and using it with the request. ```jsx import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; import axios, { CancelToken } from 'axios'; const AxiosExample = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const cancelToken = CancelToken.source(); const fetchData = async () => { try { const response = await axios.get('https://jsonplaceholder.typicode.com/posts', { cancelToken: cancelToken.token, }); setData(response.data); } catch (error) { if (axios.isCancel(error)) { console.log('Request was cancelled'); } else { setError(error.message); } } }; fetchData(); return () => { cancelToken.cancel(); }; }, []); return ( <View> {data ? ( <Text>Data fetched successfully!</Text> ) : ( <Text>Error fetching data: {error}</Text> )} </View> ); }; export default AxiosExample; ``` In this example, we are creating a CancelToken and using it with the request. We also cancel the request when the component unmounts. **What's Next?** In the next topic, we will discuss handling asynchronous operations with Promises and async/await. Do you have any questions or need help with this topic? Leave a comment below. For more information on the fetch API, you can refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). For more information on Axios, you can refer to the [Axios Documentation](https://axios-http.com). For more information on AbortController, you can refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). For more information on CancelToken, you can refer to the [Axios Documentation](https://axios-http.com/docs/cancellation).