React Native发起Fetch请求时出现TypeError: Network request failed错误的求助

我来帮你分析下这个网络请求失败的问题，结合你提供的Info.plist配置和代码，咱们一步步排查可能的原因：

一、ATS配置未正确生效是大概率原因 #

你已经添加了ATS（App Transport Security）的例外配置，但修改后没生效的情况很常见，试试这些操作：

• 确认修改的是正确的Info.plist文件：如果你的项目有多个Target（比如开发版、测试版），一定要确保修改的是当前运行Target对应的Info.plist，别改到了其他Target的文件上。
• 彻底重启Xcode和模拟器：有时候Xcode的缓存会导致配置不更新，完全关闭Xcode和模拟器，再重新打开并Clean Build Folder（Xcode菜单 > Product > Clean Build Folder）后重新运行项目。
• 检查XML语法是否正确：你提供的配置XML看起来没问题，但可以在Xcode里直接打开Info.plist，用可视化面板确认NSAppTransportSecurity下的所有键值对都正确添加，避免出现标签遗漏或拼写错误（比如weatherapi.com有没有写错）。

二、设备/模拟器的网络问题 #

有时候网络本身的问题会导致请求失败，和代码配置无关：

• 重启模拟器：在模拟器菜单里选择Hardware > Restart，很多时候模拟器的网络会出现莫名的抽风，重启后就能恢复。
• 测试网络连通性：在模拟器的Safari里直接打开你的请求URL，看看能不能正常返回JSON数据。如果Safari都打不开，那就是网络或API本身的问题（比如代理拦截、网络防火墙等）。
• 切换到真机测试：如果模拟器一直有问题，试试用真机运行项目，真机的网络环境通常更稳定。

三、代码中的调试优化（辅助排查） #

虽然你的代码逻辑本身没问题，但可以优化调试日志，帮助你定位问题：

• 修正state更新后的日志打印：因为React的state更新是异步的，你在setDegreesCelsius后立即console.log(degreesCelsius)拿到的是旧值，建议直接打印接口返回的原始数据，或者用useEffect监听state变化：

const [degreesCelsius, setDegreesCelsius] = useState(0);

useEffect(() => {
  console.log("当前温度:", degreesCelsius);
}, [degreesCelsius]);

const fetchInformation = useCallback(async () => {
  try {
    const result = await fetch(
      "http://api.weatherapi.com/v1/current.json?key=140ce0a625221404&q=Berlin&aqi=yes",
    );
    if (result.ok) {
      const data = await result.json();
      const temp = data.current.temp_c;
      setDegreesCelsius(temp);
      console.log("接口返回的温度:", temp); // 直接打印接口返回值
    } else {
      // 打印错误状态码，帮助排查API问题
      console.error("请求失败，状态码:", result.status);
    }
  } catch (e) {
    // 打印更详细的错误信息
    console.error("请求异常详情:", e.message, e.stack);
  }
}, []);

• 确认API Key有效性：虽然你说ReactJS项目能成功，但还是可以在浏览器里直接访问这个URL，确认返回的数据正常，避免出现API Key过期或权限问题。

四、额外的ATS配置尝试 #

如果上面的方法都没用，可以尝试在NSAppTransportSecurity里添加NSAllowsArbitraryLoadsInWebContent（针对iOS 14+），不过这个主要是针对WebView，但有时候也能解决Fetch的问题：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true/>
  <key>NSExceptionDomains</key>
  <dict>
    <key>localhost</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
    <key>weatherapi.com</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <key>NSIncludesSubdomains</key>
      <true/>
    </dict>
  </dict>
</dict>

按照上面的步骤一步步排查，应该能解决你的网络请求失败问题。

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