Question

我正在使用React native开发一个Android应用程序。通过此提取请求，我收到错误TypeError: network request failed：

fetch('https://pixabay.com/api/?key=MY_KEY&q='+ this.props.jsondata.city.name +'&lang=en&image_type=photo&orientation=horizontal&category=travel&safesearch=true')
        .then(response => {
            console.dir(response);
            if (!response.ok) {
                throw Error(data.statusText);
            }
            return response.json();
        })
        .then(json => {
            console.log(json.hits[0].largeImageURL)
            this.setState(() => {
                return {backImage: json.hits[0].largeImageURL};
            });
        })
        .catch(err => {
            console.log('Unable to search image! ' + err);
        });

我已经在线搜索过，但是此问题仅在本地主机地址或http上出现，而不是我的情况。该请求位于componentDidMount()函数内部。我在应用程序的另一个地方提出了类似的请求（具有相同的结构），但是那里没有错误。我使用的是真正的android设备，使用以android本机代码编译的react-native应用程序来测试该应用程序。

Answer 1

在android:usesCleartextTraffic="true"中添加AndroidManifest.xml。
从您的android文件夹中删除所有调试文件夹。

Answer 2

您可以在发出http请求之前尝试验证设备是否可以连接互联网。 React Native有一个模块来验证：Netinfo。

import { NetInfo } from 'react-native';

             ... your component code

checkInternetConnection = () => {

    return NetInfo.isConnected.fetch().then((isConnected) => {
        return isConnected;
      });

  };

Answer 3

我认为错误的主要原因是emulator SSL certificate issue。要解决此问题，您可以使用真实的设备来测试您的应用，也可以set up a persistent Certificate Authority (CA)

Answer 4

这些解决方案都不起作用，因为到处都是人们没有提到的“ localhost”，我找到了一个对我有用的解决方案，为此，您需要在以下文件中添加所需的主机 android/app/src/debug/res/xml/react_native_config.xml。这是我的xml现在的样子：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">facebook.github.io</domain>
  </domain-config>
</network-security-config>

之后，我的以下提取请求开始工作：

fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
    Alert.alert(JSON.stringify(responseJson));
});
.catch((error) => {
    console.error(error);
});

Answer 5

我建议您使用axios而不是fetch，当在不同环境中使用时，幕后axios使用不同的网络客户端，而且您不必检查response.ok因为它在响应状态无效时无法实现承诺捕获。

反应原生TypeError：网络请求失败，原因为fetch（）

5 个答案: