React Native Android Fetch failing при подключении к локальному API

Я использую API-интерфейс fetch в своем мобильном приложении Android для отправки запросов локальному API. Я обычно запрашиваю API из веб-приложений для взаимодействия по адресу http://localhost: 8163.

Я тестирую свое приложение на своем физическом устройстве в режиме отладчика. Я где-то читал, что response-native не может запрашивать localhost так же, как это может сделать веб-приложение. По-видимому, вам нужно использовать http://10.0.2.2:[PORT_NUMBER_HERE]/ который является псевдонимом для " http://127.0.0.1:[PORT_NUMBER_HERE] в соответствии с док-станциями Android-эмулятора. Я не уверен, что это то, что я должен делать для тестирования на физическом устройстве.

Код моей выборки выглядит следующим образом:

fetchToken() {
    fetch('http://10.0.2.2:8163/extension/auth', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        }
    })
    .then((response)) => console.log('successful fetchToken response: ', response.json()))
    .catch((error) => console.log('fetchToken error: ', error))
    .done();
}

Запрос всегда зависает некоторое время, а затем достигает блока catch с бесполезной ошибкой TypeError: Network request failed(...) Ошибка TypeError: Network request failed(...). Проверяя журналы для моего локального API, они вообще не регистрируют запрос.

Поэтому я понятия не имею, правильно ли я запрашиваю свой локальный API, чтобы получить тот ресурс, который я хочу, и если да, то я не знаю, почему сбой неудачен.

Ответ 1

Вы не можете получить доступ к локальному серверу разработки, потому что этот порт еще не был отправлен ADB. Когда вы запускаете react-native run-android run react-native run-android, React Native отображает порт 8081 с вашим мобильным устройством на USB-устройстве. Когда вы отключите USB-порт, вы не сможете обновить или снова перезагрузить свой код. Таким образом, в этой ситуации вы можете сделать 2 вещи: либо сопоставьте свой локальный серверный порт так же, как и React Native, или используйте свой локальный IP-адрес.

Порт сопоставления

Это работает, только если вы используете Android 6. 0+. Чтобы перенаправить порт с помощью ADB, выполните следующую команду в своем терминале:
```
adb reverse tcp:8163 tcp:8163
```
Это сопоставит ваш локальный порт 8163 с мобильным портом 8163. Таким образом, вы сможете получить доступ к серверу разработки.
Использование локального IP-адреса

Вы также можете использовать свой локальный IP-адрес для приложения React Native для перезагрузки без USB. Встряхните устройство или долго нажмите кнопку меню, чтобы открыть меню разработчика. Откройте " Dev Settings, затем нажмите " Debug server host & port for device. Здесь вы можете ввести локальный IP-адрес вашего компьютера с номером порта 8081. Напр. если ваш IP-адрес устройства 192.168.1.100 тогда вы должны ввести здесь 192.168.1.100:8081 для успешного соединения. Теперь мы рассмотрели, что мы можем перезагрузить приложение. После этого, когда вы хотите использовать сервер разработки локального компьютера, используйте тот же IP-адрес с номером порта сервера.

Вы должны быть добры, чтобы пойти с этим.

Ответ 2

Была такая же/похожая проблема - у меня ушло два полных дня, чтобы ее решить. Я использую машину Win10 с кодом Visual Studio, подключенным устройством Android и локальным сервером PHP для API. Может быть, это кому-нибудь поможет

Cable → Попробуйте разные USB-кабели, из 3-х моих кабелей работает только один
Режим подключения → Очень важно, мне пришлось выбрать режим PTP, чтобы он работал
Одна и та же сеть → Телефон и ПК должны быть в одной сети
Частная сеть → Сеть должна быть частной, общедоступная не работает
IP → Запустите ipconfig в PowerShell и получите свой IP4-адрес
Брандмауэр → Принять приглашение брандмауэра
Сервер PHP → Запустите встроенный сервер PHP с "php -S {ваш IP}: 8081"
Проверьте сервер PHP → создайте index.php и откройте {ваш IP}: 8081 на вашем телефоне
Извлечь → Создать скрипт извлечения (пример ниже)

       fetch('http://{your IP}:8081/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ message : responseJson.message.data })
        })
      .catch((error) => {
        console.error(error);
      });

Ответ 3

просто используйте componentDidMount следующим образом:

componentDidMount(){
   return fetch('http://10.0.2.2:8163/extension/auth')
        .then((response) => response.json())
        .then((responseJson) => {

            this.setState({
                isLoading: false,
                sem: responseJson
            });
        })
        .catch((error) => {
            console.error(error);
        });
}

для получения дополнительной информации: https://facebook.github.io/react-native/docs/network.html