Next.js仅移动端数据获取失效问题求助

AI 小北

2026-7-19

移动端请求失败排查与解决

你的React组件在桌面端正常但移动端请求报错，且错误信息无法正常捕获，可按以下步骤排查：

1. 完善错误捕获，获取完整报错信息

当前的console.log可能无法输出axios错误的完整细节，修改catch块打印更全面的错误数据：

catch (error) {
  console.error('请求错误详情:', {
    错误信息: error.message,
    错误栈: error.stack,
    响应数据: error?.response?.data,
    HTTP状态码: error?.response?.status,
    请求信息: error?.request
  });
}

这样能明确是请求超时、HTTP状态码错误还是其他网络问题。

2. 用远程调试查看移动端控制台

移动端浏览器的本地控制台难直观查看，用Chrome DevTools的远程设备调试功能：

打开Chrome浏览器，输入chrome://inspect/#devices
移动端开启「USB调试」并连接电脑，在页面中找到你的应用，点击「inspect」即可查看移动端的实时控制台日志，直接定位错误原因。

3. 排查常见移动端请求问题

网络兼容性问题

部分老旧移动端系统（如Android 4.4及以下）不支持TLS 1.2+，而dummyjson.com使用现代TLS协议，会导致请求失败。可测试替换为支持旧协议的接口，或检查设备系统版本。
移动端网络不稳定，可延长axios超时时间：

await axios.get('https://dummyjson.com/products', {
  timeout: 15000 // 延长至15秒
});

axios适配问题

尝试调整请求头或改用原生fetch API测试，排除axios本身的适配问题：

// 用fetch替代axios测试
try {
  const res = await fetch('https://dummyjson.com/products');
  if (!res.ok) throw new Error(`请求失败，状态码: ${res.status}`);
  const data = await res.json();
  setData(data.products);
} catch (err) {
  console.error('Fetch错误:', err);
}