第四章React_ajax

**第四章 React + Ajax**

在前面的章节中，我们已经学习了如何使用 React 构建一个简单的用户界面。然而，在现实世界中，数据往往需要从服务器端获取，而不是直接从本地存储中读取。这就是为什么我们需要了解如何使用 Ajax（Asynchronous JavaScript and XML）技术来与服务器端进行交互。

在这个章节中，我们将学习如何使用 React 和 Ajax 来构建一个更复杂的应用程序。我们将使用 Fetch API 来发送 HTTP 请求，并使用 JSON 数据格式来传递数据。

###4.1 使用 Fetch API 发送 HTTP 请求Fetch API 是一种现代的 JavaScript API，用于发送 HTTP 请求和获取响应。它提供了一个简单、易用的接口，使得开发者可以轻松地与服务器端进行交互。

下面是一个示例代码片段，演示如何使用 Fetch API 发送 GET 请求：

javascript// 使用 Fetch API 发送 GET 请求fetch(' /> .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error(error));

在这个例子中，我们使用 `fetch()` 函数发送一个 GET 请求到指定的 URL。然后，我们使用 `response.json()` 方法将响应转换为 JSON 数据格式，并使用 `console.log()` 输出数据。

###4.2 使用 Fetch API 发送 POST 请求除了 GET 请求之外，Fetch API 还支持其他类型的 HTTP 请求，如 POST、PUT 和 DELETE 等。在这个例子中，我们将演示如何使用 Fetch API 发送一个 POST 请求：

javascript// 使用 Fetch API 发送 POST 请求fetch(' {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 name: 'John Doe',
 age:30 })
})
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error(error));

在这个例子中，我们使用 `fetch()` 函数发送一个 POST 请求到指定的 URL。我们还传递了一个 JSON 对象作为请求体，并设置了 `Content-Type` 头为 `application/json`。

###4.3 使用 React Hooks 与 Fetch API 交互在前面的章节中，我们已经学习了如何使用 React Hooks 来构建一个简单的用户界面。在这个例子中，我们将演示如何使用 React Hooks 与 Fetch API 交互：

javascriptimport React, { useState, useEffect } from 'react';

function DataList() {
 const [data, setData] = useState([]);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 useEffect(() => {
 const fetchData = async () => {
 try {
 setLoading(true);
 const response = await fetch(' /> const data = await response.json();
 setData(data);
 setLoading(false);
 } catch (error) {
 setError(error);
 setLoading(false);
 }
 };
 fetchData();
 }, []);

 if (loading) {
 return <div>Loading...</div>;
 }

 if (error) {
 return <div>Error: {error.message}</div>;
 }

 return (
 <ul>
 {data.map(item => (
 <li key={item.id}>{item.name}</li>
 ))}
 </ul>
 );
}

export default DataList;

在这个例子中，我们使用 `useState()` Hook 来存储数据、加载状态和错误信息。我们还使用 `useEffect()` Hook 来发送 Fetch API 请求，并更新组件的状态。

###4.4 总结在本章节中，我们学习了如何使用 React 和 Ajax 来构建一个更复杂的应用程序。我们使用 Fetch API 发送 HTTP 请求，并使用 JSON 数据格式来传递数据。在实践中，我们还使用 React Hooks 与 Fetch API 交互，构建一个简单的用户界面。

###4.5 练习1. 使用 Fetch API 发送 GET 请求到指定的 URL。
2. 使用 Fetch API 发送 POST 请求到指定的 URL，并传递 JSON 对象作为请求体。
3. 使用 React Hooks 与 Fetch API 交互，构建一个简单的用户界面。

###4.6 参考资料* [Fetch API]( />* [React Hooks](