React Native项目卡在加载界面，Axios请求数据失效求助

数据老陈

2026-7-14

排查与解决axios请求卡加载的问题

1. 先确认请求的实际状态

打开浏览器开发者工具（F12）切换到Network标签，刷新页面后查看目标请求：

若请求未出现：检查组件是否正常挂载，或useEffect的执行条件（当前依赖为空数组，仅组件挂载时执行一次）
若请求处于pending状态：直接在浏览器地址栏访问https://fakestoreapi.com/products，确认API是否能正常响应；同时查看控制台是否有跨域（CORS）报错
若请求返回错误但未触发错误状态：说明错误捕获逻辑有遗漏，需完善日志输出

2. 完善错误捕获与日志

当前代码仅捕获错误消息，Axios错误对象包含更多关键信息，修改catch块以排查具体问题：

catch(err){    
    console.error('请求失败详情:', err);
    setError(err.response?.data?.message || err.message || '未知错误');
    setLoading(false);
}

3. 添加请求超时配置

避免因请求超时导致一直处于pending状态，给Axios添加超时限制：

const {data: responseData} = await axios.get(url, {
  timeout: 10000, // 设置10秒超时
});

4. 检查组件状态的使用逻辑

确保组件中正确处理loading和error状态，示例如下：

function ProductList() {
  const {loading, data, error} = useFetch("https://fakestoreapi.com/products");

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求错误: {error}</div>;
  
  return (
    <div>
      {data.map(item => <div key={item.id}>{item.title}</div>)}
    </div>
  );
}

若未正确判断状态，可能导致加载界面一直显示。