React 中的 REST API 集成：从 fetch 到 axios 的最佳实践

一、当React遇见REST API

在当代前端开发中，数据交互如同呼吸般重要。我们以某电商平台商品管理系统为例，设想这样的场景：用户需要实时加载商品列表、提交新商品信息、更新库存数据。传统jQuery的$.ajax已不能满足现代React应用的工程化需求，原生fetch和功能更强的axios成为主流选择。

// 基础fetch示例（React 18 + ES6）
async function loadProducts() {
  try {
    const response = await fetch('/api/products', {
      headers: {'Content-Type': 'application/json'}
    });
    if (!response.ok) throw new Error('网络响应异常');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('数据加载失败:', error);
    throw error;
  }
}

二、为什么需要axios？

1. fetch的工程化困境

浏览器自带的fetch API虽然基础功能完善，但在大型项目中存在若干痛点：

• 请求/响应拦截缺失
• 请求取消功能需要手动实现
• 默认不携带cookie需要显式设置
• 没有进度监控能力
• 服务器端渲染兼容性较差

2. axios的核心优势

// 使用axios请求拦截器（axios 1.3.4）
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

三、典型应用场景分析

场景1：分页数据加载

// 带取消功能的列表请求
function ProductList() {
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const cancelToken = useRef();

  useEffect(() => {
    cancelToken.current = axios.CancelToken.source();
    
    apiClient.get('/products', {
      params: { page },
      cancelToken: cancelToken.current.token
    }).then(({ data }) => {
      setProducts(prev => [...prev, ...data]);
    });

    return () => cancelToken.current?.cancel();
  }, [page]);

  // 分页组件...
}

场景2：文件上传进度监控

// 文件上传示例
async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  const response = await apiClient.post('/upload', formData, {
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`上传进度: ${percent}%`);
    }
  });

  return response.data;
}

四、技术方案对比手册

五、工程实践中的十项注意

1. 缓存策略：GET请求配合ETag实现304缓存
2. 节流防抖：搜索建议接口的500ms延迟发送
3. 队列控制：并发请求的并发数限制
4. 重试机制：网络抖动时的自动重试设计
5. 类型安全：使用TypeScript定义接口规范
6. 监控埋点：请求耗时统计与异常监控
7. 安全防护：CSRF Token的自动化管理
8. 本地缓存：SWR模式的混合式数据获取
9. 服务降级：异常时的备用数据源方案
10. 性能追踪：使用Performance API测量请求耗时

六、核心决策路径树

当面临技术选型时，可通过以下路径快速决策：

是否需要高级功能? 
→ Yes → 选axios
→ No → 
  是否需要零依赖? 
  → Yes → 选fetch
  → No → 
    是否需要服务端渲染?
    → Yes → 选axios
    → No → 根据团队偏好选择

七、全链路性能优化

// 请求延迟加载示例
const searchProducts = useMemo(() => {
  return throttle(async (keyword) => {
    const { data } = await apiClient.get('/search', {
      params: { q: keyword },
      cancelToken: new CancelToken(c => cancelSearch.current = c)
    });
    return data;
  }, 300);
}, []);

// 配合React Suspense的数据预加载
const preloadData = () => {
  const promise = apiClient.get('/essential-data');
  throw promise; // 触发Suspense边界
};

八、未来演进路线

1. 自动类型推导：基于OpenAPI规范生成TS类型
2. 混合式请求：结合GraphQL的混合查询方案
3. 智能缓存：基于机器学习预测缓存策略
4. 多路复用：HTTP/2的流量优化实现
5. 边缘计算：与Cloudflare Workers的无缝集成