React Native中Fetch API无法从服务器获取数据的问题排查

先修正代码，捕获更多异常信息 #

你的现有代码没有处理HTTP状态异常（比如404、500），而Fetch API只有网络层错误才会触发catch，HTTP错误不会进入捕获逻辑。如果服务器返回非200状态但内容不是有效JSON，就会出现data为undefined且无报错的情况。先修改代码增加状态检查：

import React, { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      // 新增：检查HTTP响应状态
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      // 先打印响应文本，确认返回内容
      const responseText = await response.text();
      console.log('响应内容:', responseText);
      const data = JSON.parse(responseText);
      console.log('解析后的数据:', data);
    } catch (error) {
      console.error('获取数据出错:', error);
    }
  }

  return (
    // 组件JSX
  );
}

React Native环境特有的问题排查点 #

1. iOS ATS配置限制

iOS 9+默认开启App Transport Security（ATS），要求所有网络请求使用合规的HTTPS证书。如果你的服务器证书是自签名、过期或不符合ATS标准，Fetch会静默失败（无报错但无数据）。

• 临时解决（仅测试环境）：在ios/[你的项目名]/Info.plist中添加ATS例外：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• 生产环境：必须修复服务器证书，使其符合ATS要求。

2. Android网络权限缺失

确保android/app/src/main/AndroidManifest.xml中添加了网络权限（RN 0.60+默认已添加，但老项目或手动修改后可能丢失）：

<uses-permission android:name="android.permission.INTERNET" />

3. 调试代理问题

如果真机调试时开启了Charles、Fiddler等代理，但手机代理配置不正确（比如IP、端口错误），会导致请求无法到达服务器，出现无数据无报错的情况。

• 解决：关闭代理，或确保手机与电脑在同一网络，代理配置完全匹配。

4. Fetch缓存问题

部分场景下，RN的Fetch会缓存旧的响应结果，导致你拿到的是之前的空数据。可以添加请求头禁用缓存：

const response = await fetch('https://api.example.com/data', {
  headers: {
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  }
});

快速排查工具 #

打开RN调试菜单（模拟器按Cmd+D，真机摇一摇），选择Show Network Inspector，可以查看请求的完整细节：是否发送成功、响应状态码、响应内容等，这是最直接的排查方式。

替代方案测试 #

如果以上排查都无效，可尝试用axios替代Fetch，验证是否是RN Fetch的适配问题：

npm install axios

替换代码：

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('数据:', response.data);
  } catch (error) {
    console.error('出错:', error);
  }
}

内容的提问来源于stack exchange，提问作者André Silverio Silva