Reactive Native Android Fetch bei Verbindung mit lokaler API fehlgeschlagen

Question

Ich verwende die Fetch-API in meiner reagierenden nativen Android-App, um Anfragen an eine lokale API zu senden. Normalerweise frage ich diese API von react Web-Apps unter http://localhost:8163.

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

Mein Code holen sieht wie folgt 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 immer für eine Weile hängt und erreicht dann den catch Block mit dem nicht hilfreich Fehler TypeError: Network request failed(...). Wenn ich die Protokolle für meine lokale API überprüfe, registrieren sie die Anfrage überhaupt nicht.

So habe ich keine Ahnung, ob ich meine lokale API richtig abfragen, um die Ressource zu bekommen, die ich will, und wenn ich bin, weiß ich nicht, warum der Abruf fehlschlägt.

Answer 1

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, bildet React Native den Port 8081 mit Ihrem mobilen Gerät auf USB ab. Wenn Sie Ihre USB-Verbindung trennen, können Sie Ihren Code nicht mehr aktualisieren oder neu laden. In dieser Situation können Sie also zwei Dinge tun, entweder Ihren lokalen Server-Port zuordnen, so wie React Native funktioniert, oder Ihre lokale IP-Adresse verwenden.

1. Mapping-Port

   Dies funktioniert nur, wenn Sie Android 6.0+ verwenden. So leiten Sie den folgenden Befehl in das Terminal einen Port mit ADB laufen:

   adb reverse tcp:8163 tcp:8163 
   

   Dies wird Ihre lokale 8163 Port Mobile 8163 Port zuordnen. Auf diese Weise können Sie auf Ihren Entwicklungsserver zugreifen.

2. lokale IP-Adresse verwenden

   Sie können auch auf der lokalen IP verwenden Reagieren india Entwicklung app sie ohne USB zu laden. Schütteln Sie Ihr Gerät oder drücken Sie lange auf die Menütaste, um das Entwicklermenü zu öffnen. Öffnen Sie Dev Settings und tippen Sie dann 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 Beispiel Wenn die IP-Adresse Ihres Geräts 192.168.1.100 lautet, geben Sie hier 192.168.1.100:8081 ein, um eine erfolgreiche Verbindung herzustellen. Jetzt haben wir gedeckt, dass wir die App neu laden können. Wenn Sie danach den Entwicklungsserver Ihres lokalen Rechners verwenden möchten, verwenden Sie dieselbe IP-Adresse mit der Portnummer Ihres Servers.

Sie sollten gut sein, damit zu gehen.

Answer 2

verwenden nur componentDidMount wie folgt aus:

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

für mehr: https://facebook.github.io/react-native/docs/network.html