You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Native Android端Fetch网络请求失败问题求助

解决React Native Android端“Network request failed”问题的思路

Hey there, let's tackle this issue together—since you're new to React Native, let's break down each problem step by step and fix them:

1. 先修复请求URL的问题

你当前的URL里包含&,这是HTML转义后的&符号,浏览器和React Native的fetch都无法正确解析这个转义字符,直接导致请求地址无效。把&替换成普通的&,修正后的URL应该是:

https://samples.openweathermap.org/data/2.5/forecast16?q=London&appid=b6907d289e10d714a6e88b30761fae22

先在浏览器里测试这个修正后的URL,如果还是打不开,大概率是网络区域限制或者该示例接口暂时不可用,你可以换成OpenWeatherMap的正式接口(需要自己注册获取专属appid)试试。

2. 修正你的GET请求代码

你的现有GET请求有几个容易踩的小坑:

  • console.log写在then方法外面,这时候异步请求还没完成,this.resp肯定是undefined
  • data={resp}的写法不符合JavaScript语法,应该把数据存到组件的state或者变量里
  • 空的catch块会掩盖具体错误信息,完全没办法排查问题

修正后的代码示例(以类组件为例):

fetch('https://samples.openweathermap.org/data/2.5/forecast16?q=London&appid=b6907d289e10d714a6e88b30761fae22')
  .then((response) => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP错误!状态码: ${response.status}`);
    }
    return response.json();
  })
  .then((resp) => {
    this.setState({ data: resp }); // 把数据存到组件state里
    console.log("请求到的数据:", resp); // 在这里打印,确保请求完成后才执行
  })
  .catch(error => {
    console.error("请求失败原因:", error); // 打印具体错误,方便定位问题
  });

3. 关于POST请求的误用

OpenWeatherMap的forecast16接口是仅支持GET请求的,你用POST请求调用它本身就不符合接口规范,这也是导致请求失败的原因之一,所以直接用GET就好。

4. Android端的额外配置(针对“不安全URL”问题)

你提到URL不安全,说明该域名的HTTPS证书可能不被Android系统信任(比如自签名证书、过期证书),或者是HTTP明文请求。如果是前者,你需要在Android项目里配置允许该域名的不安全连接:

  1. android/app/src/main/res/xml目录下创建network_security_config.xml文件,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">samples.openweathermap.org</domain>
    </domain-config>
</network-security-config>
  1. AndroidManifest.xml<application>标签里添加配置引用:
<application
  ...
  android:networkSecurityConfig="@xml/network_security_config">

这样Android就会允许与该域名的连接,即使证书存在信任问题。

5. 确认Android权限配置

你已经加了INTERNET权限,这没问题,但要确保权限是写在AndroidManifest.xml<manifest>标签下(不是<application>里面):

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.yourappname">

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

  <application
    ...>
    ...
  </application>
</manifest>

按照上面的步骤逐一排查,应该就能解决你的网络请求问题啦!

内容的提问来源于stack exchange,提问作者Saeid

火山引擎 最新活动