React 入门第九天：与后端API的集成与数据管理

在React学习的第九天，我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信，我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。

1. 使用`fetch`进行数据请求

React没有内置的HTTP库，因此我们通常使用浏览器提供的fetch API或第三方库如axios来发送请求。

以下是一个使用fetch从API获取数据的示例：

import React, { useState, useEffect } from 'react';function DataFetchingComponent() {const [data, setData] = useState([]);const [loading, setLoading] = useState(true);useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => {setData(data);setLoading(false);}).catch(error => {console.error('Error fetching data:', error);setLoading(false);});}, []);if (loading) {return <div>加载中...</div>;}return (<div>{data.map(item => (<div key={item.id}>{item.name}</div>))}</div>);
}export default DataFetchingComponent;

在这个例子中，我们使用useEffect在组件加载时发送HTTP请求，获取的数据存储在data状态中，并根据loading状态显示加载指示。

2. 使用`axios`进行数据请求

虽然fetch API足够强大，但在实际项目中，开发者更倾向于使用axios，因为它提供了更丰富的功能，如自动处理JSON、支持拦截器等。

import React, { useState, useEffect } from 'react';
import axios from 'axios';function DataFetchingComponent() {const [data, setData] = useState([]);const [loading, setLoading] = useState(true);useEffect(() => {axios.get('https://api.example.com/data').then(response => {setData(response.data);setLoading(false);}).catch(error => {console.error('Error fetching data:', error);setLoading(false);});}, []);if (loading) {return <div>加载中...</div>;}return (<div>{data.map(item => (<div key={item.id}>{item.name}</div>))}</div>);
}export default DataFetchingComponent;

axios的使用方法与fetch类似，但它的API更加简洁，并且自动处理了JSON解析。

3. 数据的POST请求与表单处理

除了获取数据外，React应用通常还需要发送数据到服务器，例如处理表单提交。以下是一个简单的POST请求示例：

function SubmitFormComponent() {const [inputValue, setInputValue] = useState('');const handleSubmit = (event) => {event.preventDefault();axios.post('https://api.example.com/submit', { input: inputValue }).then(response => {console.log('Data submitted:', response.data);}).catch(error => {console.error('Error submitting data:', error);});};return (<form onSubmit={handleSubmit}><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><button type="submit">提交</button></form>);
}

这里我们处理了表单的提交，通过axios.post发送用户输入的数据到服务器。

4. 处理请求状态与错误

在实际应用中，处理请求的各种状态（如加载、成功、失败）是非常重要的。以下是如何在React中优雅地处理这些状态的一个示例：

function EnhancedDataFetchingComponent() {const [data, setData] = useState([]);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {axios.get('https://api.example.com/data').then(response => {setData(response.data);setLoading(false);}).catch(error => {setError('Failed to fetch data');setLoading(false);});}, []);if (loading) {return <div>加载中...</div>;}if (error) {return <div>{error}</div>;}return (<div>{data.map(item => (<div key={item.id}>{item.name}</div>))}</div>);
}