Реагируйте на собственную ошибку TypeError: сбой сетевого запроса с fetch ()

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.

Answer 1

Ни одно из этих решений не работало, так как везде люди ссылались на "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 2

Полагаю, основной причиной ошибки является Эмулятор SSL-сертификата . Для решения этой проблемы вы можете использовать реальное устройство для тестирования своего приложения или настроить постоянный центр сертификации (CA)

Answer 3

Я порекомендовал вам использовать axios вместо fetch, при этом axios за кулисами использует другой сетевой клиент, когда он используется в разных средах, плюс вам не нужно проверять, если response.ok потому что не удается поймать обещание, когда статус ответа недействителен.

Answer 4

Вы можете попробовать проверить, подключено ли устройство к Интернету, прежде чем отправлять http-запрос. В React Native есть модуль для проверки: Netinfo .

import { NetInfo } from 'react-native';

             ... your component code

checkInternetConnection = () => {

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

  };