webentwicklung-frage-antwort-db.com.de

Reagieren Sie den systemeigenen Android-Abruf, der bei der Verbindung zur lokalen API fehlschlägt

Ich verwende die Abruf-API in meiner reaktiven Android-App, um Anforderungen an eine lokale API zu stellen. Normalerweise frage ich die besagte API von reaktiven Web-Apps unter http: // localhost: 8163 ab. 

Ich teste meine App auf meinem physischen Gerät im Debugger-Modus. Ich habe irgendwo gelesen, dass Reaktiver nicht wie Local-Hosts eine Web-App abfragen kann. Anscheinend müssen Sie http://10.0.2.2:[PORT_NUMBER_HERE]/ verwenden, was ein Alias ​​für ` http://127.0.0.1:[PORT_NUMBER_HERE] ist, entsprechend den Android-Emulator-Docks. Ich bin mir nicht sicher, ob dies das ist, was ich zum Testen auf einem physischen Gerät machen soll. 

Mein Abrufcode sieht folgendermaßen aus:

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();
}

Die Anforderung bleibt immer eine Weile stehen und erreicht dann den catch-Block mit dem nicht hilfreichen Fehler TypeError: Network request failed(...). Beim Überprüfen der Protokolle für meine lokale API wird die Anforderung überhaupt nicht registriert.

Ich habe also keine Ahnung, ob ich meine lokale API richtig abfrage, um die gewünschte Ressource zu erhalten, und wenn ich es weiß, weiß ich nicht, warum der Abruf fehlschlägt.

androidreact-native
25
seanchen1991

Sie können nicht auf Ihren lokalen Entwicklungsserver zugreifen, da dieser Port noch nicht von ADB weitergeleitet wurde. Wenn Sie react-native run-Android ausführen, ordnet React Native den Port 8081 mit Ihrem mobilen Gerät auf USB zu. Wenn Sie Ihre USB-Verbindung trennen, können Sie den Code nicht mehr aktualisieren oder im laufenden Betrieb laden. In dieser Situation können Sie also zwei Dinge tun, indem Sie entweder Ihren lokalen Serverport genau wie React Native zuordnen oder Ihre lokale IP-Adresse verwenden.

  1. Mapping-Port

    Dies funktioniert nur, wenn Sie Android 6.0 oder höher verwenden. Um einen Port mit ADB weiterzuleiten, führen Sie den folgenden Befehl in Ihrem Terminal aus:

    adb reverse tcp:8163 tcp:8163

    Dadurch wird Ihr lokaler 8163-Port dem 8163-Port des Mobiltelefons zugeordnet. Sie können auf diese Weise auf Ihren Entwicklungsserver zugreifen.

  2. Lokale IP-Adresse verwenden

    Sie können Ihre lokale IP-Adresse auch in der React Native-Entwicklungs-App verwenden, um sie ohne USB erneut zu laden. Schütteln Sie Ihr Gerät oder drücken Sie lange die Menütaste, um das Entwicklermenü zu öffnen. Öffnen Sie Dev Settings und tippen Sie auf Debug server Host & port for device. Hier können Sie die lokale IP-Adresse Ihres Geräts mit der Portnummer 8081 eingeben. Für ex. Wenn die IP-Adresse Ihres Computers 192.168.1.100 ist, geben Sie 192.168.1.100:8081 hier für eine erfolgreiche Verbindung ein. Nun haben wir abgedeckt, dass wir die App neu laden können. Wenn Sie danach den Entwicklungsserver Ihres lokalen Computers verwenden möchten, verwenden Sie dieselbe IP-Adresse wie die Portnummer Ihres Servers. 

Sie sollten gut damit umgehen.

39
Jagjot Singh

Hatte das gleiche/ähnliche Problem - ich habe zwei volle Tage gebraucht, um es zu lösen. Ich verwende einen Win10-Computer mit Visual Studio Code, einem angeschlossenen Android-Gerät und einem lokalen PHP -Server für die API. Vielleicht hilft das jemandem: 

  1. Kabel -> Probieren Sie verschiedene USB-Kabel aus, von meinen 3 Kabeln funktioniert nur eines
  2. Verbindungsmodus -> Sehr wichtig, ich musste den PTP-Modus wählen, damit es funktioniert
  3. Gleiches Netzwerk -> Telefon und PC müssen sich im selben Netzwerk befinden
  4. Privates Netzwerk -> Das Netzwerk muss ein privates Netzwerk sein, public funktioniert nicht
  5. IP -> Führen Sie ipconfig in PowerShell aus und erhalten Sie Ihre IP4-Adresse
  6. Firewall -> Akzeptieren Sie die Firewall-Eingabeaufforderung
  7. PHP-Server -> Starten Sie den eingebauten PHP -Server mit "php -S {Ihre IP}: 8081".
  8. Testen Sie den PHP -Server -> Erstellen Sie index.php und öffnen Sie {Ihre IP}: 8081 auf Ihrem Telefon
  9. Abruf -> Abrufskript erstellen (Beispiel unten)

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

0
Peter