React Native Android端Fetch网络请求失败问题求助
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肯定是undefineddata={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项目里配置允许该域名的不安全连接:
- 在
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>
- 在
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




