So verwenden Sie Fetch zum Senden von Netzwerkanfragen in React Native

In diesem Artikel wird hauptsächlich der Beispielcode von React Native vorgestellt, der Fetch zum Senden von Netzwerkanfragen verwendet. Er hat einen gewissen Referenzwert.

Wir verwenden in unseren Projekten häufig HTTP-Anfragen, um auf das Netzwerk zuzugreifen . HTTP-Anfragen (HTTPS) werden normalerweise in „GET“, „PUT“, „POST“ und „DELETE“ unterteilt. Wenn nicht angegeben, ist die Standardeinstellung GET-Anfrage.

In Projekten verwenden wir im Allgemeinen zwei Anfragemethoden: GET und POST. Für die Übermittlung solcher Anfragen in Formularen mit Parametern verwenden wir normalerweise die POST-Anfragemethode.

Um HTTP-Anfragen zu stellen, müssen wir zur Implementierung die von React Native bereitgestellte Fetch-API verwenden. Um Inhalte von einer beliebigen Adresse abzurufen, übergeben Sie einfach die URL als Parameter an die Abrufmethode (das Wort fetch selbst bedeutet get

GET

Wenn Sie Daten anfordern möchten Über die GET-Methode konvertieren und in JSON konvertieren, können Sie dies mit dem folgenden Code tun:

fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => {
    return responseJson.movies;
   })
   .catch((error) => {
    console.error(error);
   });

Konvertieren Sie die zurückgegebene Antwort über die obige Anfrage in ein JSON-Objekt und entfernen Sie dann das Filmfeld im JSON-Objekt . Wenn gleichzeitig ein Fehler auftritt, z. B. ein Netzwerkfehler oder ein Zugriffsverbindungsfehler, können wir unter normalen Umständen die folgenden Ergebnisse erhalten:

{
 "title": "The Basics - Networking",
 "description": "Your app fetched this from a remote endpoint!",
 "movies": [
  { "title": "Star Wars", "releaseYear": "1977"},
  { "title": "Back to the Future", "releaseYear": "1985"},
  { "title": "The Matrix", "releaseYear": "1999"},
  { "title": "Inception", "releaseYear": "2010"},
  { "title": "Interstellar", "releaseYear": "2014"}
 ]
}

POST (1 )

Natürlich verfügt die obige GET-Anfrage auch über einen optionalen zweiten Parameter, der zum Anpassen einiger Parameter der HTTP-Anfrage verwendet werden kann. oder geben Sie die POST-Methode an oder oder senden Sie Daten usw.: Die Fetch-API unterstützt auch das Anpassen von Headern, das Ändern der Methode, das Hinzufügen von Text usw.

let url = "http://www.yousite.com/xxxx.ashx” 
let params = {"name":"admin","password":"admin"}; 
fetch(url, {
 method: 'POST',
 headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
 },
 body: JSON.stringify(params)
})

Das Obige erstellt eine grundlegende POST-Anfrage und fügt ihre eigenen Header hinzu: Akzeptieren und Inhaltstyp hinzugefügt.

POST (2)

let url = "http://www.yousite.com/xxxx.ashx”; 
let params = "username=admin&password=admin”; 
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: params,
}).then((response) => {
  if (response.ok) {
    return response.json();
  }
}).then((json) => {
  console.log(json)
}).catch((error) => {
  console.error(error);
});

POST (3) Empfohlen

Durch die Die beiden oben genannten Methoden: Wir haben eine andere Möglichkeit, eine POST-Anfrage zu senden. Diese Methode wird natürlich auch empfohlen.

Wenn Ihr Server das oben genannte POST-Datenformat nicht erkennt, können Sie das herkömmliche Formularformat ausprobieren lautet wie folgt:

let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';

// `首先我们需要自己创建一个FormData，来存请求参数`

let parameters = new FormData();
parameters.append("mt", "30013");
parameters.append("pg", "1");
parameters.append('ps', '20');


fetch(REQUEST_URL, {
  method: 'POST',
  body: parameters
}).then(
  (result) => {
    if (result.ok) {
      console.log(result)
      result.json().then(
        (obj) => {
          console.log(obj)
        }
      )
    }
  }
).catch((error) => {
  console.log(error)
  Alert.alert('Error')
})

Ein weiterer Vorteil der Empfehlung dieser Methode besteht darin, dass Sie den Bytestream direkt in FormData übergeben können, um die Funktion zum Hochladen von Bildern zu implementieren. Der Code lautet wie folgt:

uploadImage(){ 
 let formData = new FormData(); 
 let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'}; 

 formData.append("images",file); 

 fetch(url,{ 
  method:'POST', 
  headers:{ 
    'Content-Type':'multipart/form-data', 
  }, 
  body:formData, 
 }) 
 .then((response) => response.text() ) 
 .then((responseData)=>{ 

  console.log('responseData',responseData); 
 }) 
 .catch((error)=>{console.error('error',error)}); 

}

Verarbeiten Sie die Antwortdaten des Servers

Das obige Beispiel zeigt, wie eine Anfrage initiiert wird. In vielen Fällen müssen Sie auch die vom Server zurückgegebenen Daten verarbeiten.
Netzwerkanfragen sind natürlich eine asynchroner Vorgang, und die Fetch-Methode gibt einen Promise zurück. Informationen zu Promise finden Sie unter: Promise

Verarbeitet die vom Server zurückgegebenen Daten und dritte POST-Anfragen oben. Den spezifischen Code finden Sie im obigen Implementierungscode.

Standardmäßig blockiert iOS alle Nicht-https-Anfragen. Wenn es sich bei der von Ihnen angeforderten Schnittstelle um ein HTTP-Protokoll handelt, müssen Sie eine Ausnahme hinzufügen für App Transport Security zuerst.

So implementieren Sie Flux auf knockoutjs

So verwenden Sie Vue, um nahtlose Bildlaufkomponenten zu implementieren

Schwierigkeiten bei JavaScript-Array-Operationen (ausführliches Tutorial)

So implementieren Sie die Like-Funktion im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Fetch zum Senden von Netzwerkanfragen in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!