**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Integrating RESTful APIs and Asynchronous Data Fetching **Topic:** Fetching data with fetch API and axios **Overview:** In this topic, we will explore the process of fetching data from RESTful APIs using the Fetch API and Axios. The Fetch API is a built-in JavaScript API for making HTTP requests, while Axios is a popular third-party library for making HTTP requests in React applications. By the end of this topic, you will be able to fetch data from APIs, handle loading states, and handle errors in your React applications. **What is the Fetch API?** The Fetch API is a built-in JavaScript API for making HTTP requests. It was introduced in ECMAScript 2015 (ES6) and provides a simple and intuitive way to make HTTP requests. The Fetch API allows you to make GET, POST, PUT, and DELETE requests, as well as make requests with bodies and headers. Here is an example of using the Fetch API to make a GET request: ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` This code makes a GET request to the specified URL, parses the response as JSON, and logs the data to the console. **What is Axios?** Axios is a popular third-party library for making HTTP requests in React applications. It provides a simple and intuitive way to make HTTP requests, as well as support for promises, JSON data, and HTTPinterceptors. Axios can be installed using npm or yarn: ```bash npm install axios ``` Here is an example of using Axios to make a GET request: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` This code makes a GET request to the specified URL and logs the response data to the console. **Fetching data with Fetch API and Axios** To fetch data from an API using the Fetch API and Axios, you can use the following code: ```javascript import React, { useState, useEffect } from 'react'; function APIExample() { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); setData(data); } catch (error) { setError(error); } }; fetchData(); }, []); if (data) { return <div>Data: {data}</div>; } else if (error) { return <div>Error: {error.message}</div>; } else { return <div>Loading...</div>; } } ``` This code uses the `useState` hook to store the fetched data and error in the component's state. The `useEffect` hook is used to make the GET request when the component mounts. The response data is then stored in the component's state, and the error is caught and stored in the state. **Best practices:** When fetching data from APIs, it's essential to handle loading states and errors. Here are some best practices to follow: * Always handle loading states by displaying a loading message or indicator. * Always handle errors by displaying an error message or indicator. * Use try-catch blocks to catch any errors that may occur during the request. * Use the `await` keyword to wait for the response before trying to access the data. * Use the `then` method to handle the response data. * Use the `catch` method to handle any errors that may occur during the request. **Example use case:** Suppose we want to fetch a list of users from an API. We can use the following code: ```javascript import React, { useState, useEffect } from 'react'; function UserList() { const [users, setUsers] = useState([]); const [error, setError] = useState(null); useEffect(() => { const fetchUsers = async () => { try { const response = await fetch('https://api.example.com/users'); const users = await response.json(); setUsers(users); } catch (error) { setError(error); } }; fetchUsers(); }, []); if (users) { return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } else if (error) { return <div>Error: {error.message}</div>; } else { return <div>Loading...</div>; } } ``` This code fetches a list of users from the API and displays them in an unordered list. **Exercise:** Write a function that fetches data from an API and returns a promise that resolves to the data. Use the Fetch API or Axios to make the request. **Comment or ask for help:** What is the main difference between using the Fetch API and Axios to make HTTP requests? How do you handle loading states and errors when fetching data from APIs?