React Native中fetch()未返回正确JSON，Ajax请求正常的技术求助

我来帮你排查下这个React Native fetch获取数据异常的问题，结合你的描述，大概率是这几个地方出了问题，一步步来解决：

• 修正URL中的转义字符
  你代码里用了&来连接参数，这是HTML的实体转义字符，但在JavaScript的URL字符串里，直接用&就可以了。&会被服务器当成key参数名的一部分，导致后端接收的参数错误，自然返回的内容不对。修改后的URL应该是：

  'https://url.com/api/globalfeed.php?skip=0&key=' + this.state.user
  

  或者用模板字符串更清晰：

  `https://url.com/api/globalfeed.php?skip=0&key=${this.state.user}`
  

• 完善fetch的响应处理流程
  很多时候问题出在没有正确解析响应。fetch不会自动把响应转成JSON，你需要显式调用.json()方法，同时最好先检查响应状态是否正常：

  getPostData() {
    fetch(`https://url.com/api/globalfeed.php?skip=0&key=${this.state.user}`, {
      headers: {
        Accept: "application/json",
        'Content-Type': "application/json",
      },
    })
    .then(response => {
      // 先确认HTTP响应状态码是200开头的成功状态
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      // 解析JSON格式的响应
      return response.json();
    })
    .then(postData => {
      console.log("获取到的信息流数据：", postData);
      // 这里把数据更新到state或者做后续处理
    })
    .catch(error => {
      console.error("请求或解析出错：", error);
    });
  }
  

• 排查原始响应内容
  如果还是不对，建议先打印原始的响应文本，看看服务器实际返回的是什么——说不定是返回了HTML错误页面或者有额外的输出（比如PHP的警告信息）：

  getPostData() {
    fetch(`https://url.com/api/globalfeed.php?skip=0&key=${this.state.user}`, {
      headers: {
        Accept: "application/json",
        'Content-Type': "application/json",
      },
    })
    .then(response => response.text())
    .then(rawContent => {
      console.log("服务器原始返回内容：", rawContent);
      // 尝试手动解析JSON，看是否有语法错误
      try {
        const parsedData = JSON.parse(rawContent);
        console.log("解析后的JSON数据：", parsedData);
      } catch (parseError) {
        console.error("JSON解析失败：", parseError);
      }
    })
    .catch(error => {
      console.error("请求出错：", error);
    });
  }
  

• 检查PHP脚本的输出完整性
  确保你的PHP脚本没有输出任何额外内容，比如开头的空格、调试用的echo语句，这些都会破坏JSON的格式。可以在PHP脚本开头加上ob_clean();清空输出缓冲区，再输出JSON：

  <?php
  ob_clean(); // 清空之前的输出
  header('Content-Type: application/json');
  // 你的业务逻辑，生成JSON数据
  echo json_encode($yourData);
  exit;
  ?>
  

• React Native平台特定的网络配置
  如果是HTTP协议（不是HTTPS），Android 9及以上默认禁止明文网络请求，需要在android/app/src/main/AndroidManifest.xml的<application>标签里添加：

  android:usesCleartextTraffic="true"
  

  iOS上则需要在Info.plist里添加App Transport Security的例外配置，允许HTTP请求。

内容的提问来源于stack exchange，提问作者user3639017