第22章：与后端集成

使用REST API

1. REST API基础概念

  • REST架构原则：资源标识（URI）、统一接口（HTTP方法）、无状态性等
  • HTTP方法对照：
    • GET：获取资源
    • POST：创建资源
    • PUT/PATCH：更新资源
    • DELETE：删除资源
  • 状态码说明：200（成功）、201（创建成功）、400（客户端错误）、500（服务端错误）

2. 在React中调用REST API

2.1 使用原生Fetch API

fetch('https://api.example.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2.2 使用Axios库

import axios from 'axios';

axios.get('https://api.example.com/posts/1')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

2.3 最佳实践

  • 封装API请求层：创建统一的apiClient.js文件
  • 错误处理：拦截器统一处理401/500等错误
  • 请求取消：使用AbortController避免组件卸载后的内存泄漏

3. 数据状态管理策略

方案适用场景示例库
组件内状态简单临时数据useState
全局状态跨组件共享数据Redux/Context API
数据缓存高频读取低频更新数据React Query/SWR

4. 实战示例：用户管理系统

// 用户列表组件示例
function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/users');
        setUsers(response.data);
      } catch (error) {
        alert('Failed to load users');
      }
    };
    fetchUsers();
  }, []);

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

5. 安全注意事项

  • 认证方式：
    • JWT（存储在HttpOnly Cookie中）
    • OAuth 2.0
  • 防护措施：
    • CSRF Token验证
    • 请求速率限制（Rate Limiting）
    • 敏感数据加密（HTTPS必须）

6. 性能优化技巧

  • 数据分页：/api/posts?page=1&limit=10
  • 懒加载：滚动到底部自动加载
  • 缓存策略：设置Cache-Control头或使用SWR

专家提示：对于复杂应用，建议使用React Query等库管理服务器状态，可以自动处理缓存、重试、后台更新等特性。

Last Updated::