So verwenden Sie Axios, um Netzwerkanforderungen in React Native zu stellen

In der Front-End-Entwicklung gibt es viele Möglichkeiten, Datenanforderungen abzuschließen, z. B. Ajax, jQuery Ajax, Axios und Fetch. Mit der Entwicklung der Technologie sind jedoch im Wesentlichen zwei Methoden verfügbar: Axios und Fetch.

Axios ist eine Promise-basierte HTTP-Netzwerkbibliothek, die auf der Browserseite und auf Node.js ausgeführt werden kann. Netzwerkanforderungen von Vue-Anwendungen werden grundsätzlich damit abgeschlossen. Axios verfügt über viele hervorragende Funktionen, wie etwa die Unterstützung für das Abfangen und Beantworten von Anfragen, die Stornierung von Anfragen, die automatische JSON-Konvertierung, clientseitigen Schutz gegen XSRF usw.

Bevor Sie Axios verwenden, müssen Sie das Axios-Plug-In im Projekt installieren. Der Installationsbefehl lautet wie folgt.

//npm 
npm installiere axios --save
//Garn
Garn hinzufügen reagieren-native-axios 

Als hervorragende Netzwerkanforderungsbibliothek unterstützt axios grundlegende Anforderungen wie GET, POST, DELET und PUT. Wenn Sie beispielsweise axios verwenden, um eine GET-Anfrage zu stellen, können Sie die Methode axios.get() und axios(config { ... }) verwenden, wie unten gezeigt.

axios.get('/getData', {
    Parameter: { 
      ID: 123
    }
  }).dann(Funktion (Antwort) {
    console.log(Antwort);
  })

axios({
  Methode: 'GET',
  URL: „/getData“,
  Parameter: {
    ID: 123,
  }
}).dann(Funktion (Antwort) {
    console.log(Antwort);
}); 

Es ist ersichtlich, dass bei direkter Verwendung von Axios für Netzwerkanforderungen viel redundanter Code generiert wird. Daher ist im eigentlichen Entwicklungsprozess auch eine gewisse Kapselung von Axios-Anforderungen erforderlich, um die spätere Verwendung zu erleichtern, wie unten gezeigt.

Es ist ersichtlich, dass bei direkter Verwendung von Axios für Netzwerkanforderungen viel redundanter Code generiert wird. Daher ist im eigentlichen Entwicklungsprozess auch eine gewisse Kapselung von Axios-Anforderungen erforderlich, um die spätere Verwendung zu erleichtern, wie unten gezeigt.

const Anfrage = axios.erstellen({
  transformAntwort: [
    Funktion (Daten) {
      Daten zurückgeben;
    },
  ],
});

const defaultOptions = { //Standardkonfigurations-URL wird verarbeitet: '',
  userAgent: 'BIZSTREAM-Bibliothek',
  Authentifizierung:
    Integration:
      Zugriffstoken: nicht definiert,
    },
  },
};

Klasse Bizstream {
  init(Optionen) {
    diese.Konfiguration = {...Standardoptionen, ...Optionen};
    diese.base_url = diese.configuration.url;
    dieser.root_path = '';
  }

  post(Pfad, Parameter, Daten, Typ = ADMIN_TYPE) {
    returniere this.send(Pfad, 'POST', Parameter, Daten, Typ);
  }

  get(Pfad, Parameter, Daten, Typ = ADMIN_TYPE) {
    returniere this.send(Pfad, 'GET', Parameter, Daten, Typ);
  }

  send(Pfad, Methode, Parameter, Daten, Typ, HeaderOption) {
    const url = `${this.base_url}${this.root_path}${Pfad}`;
    const-Header = {
      'Benutzer-Agent': diese.Konfiguration.BenutzerAgent,
      'Inhaltstyp': 'application/json',
      ...HeaderOption,
    };

    returniere neues Promise((lösen, ablehnen) => {
      Anfrage({URL, Methode, Header, Parameter, Daten}).dann(Antwort => {
        .... //Das zurückgegebene Ergebnis verarbeiten});
    });
  }
}

exportiere const bizStream = neuer Bizstream();

Nach der Kapselung ist es viel bequemer, Netzwerkanforderungen zu stellen, und wir verarbeiten auch einige allgemeine Rückgabeergebnisse auf der Netzwerkebene. Bei der tatsächlichen Verwendung müssen Entwickler nur die erforderlichen Parameter nach Bedarf übergeben und dann die zurückgegebenen Ergebnisse über die asynchrone Funktion verarbeiten, wie unten gezeigt.

//GET-Anfrage const hotMovie='';
const data = warte auf apiRequest.get(hotMovie);
//POST-Anfrage let baseUrl = '';
let param = {
   Seitennummer: 0,
   StadtCd: 31,
 };
const data = warte auf apiRequest.post(baseUrl, param);

Dies ist das Ende dieses Artikels über die Verwendung von Axios zum Stellen von Netzwerkanforderungen in React Native. Weitere Informationen zu Netzwerkanforderungen von React Native finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!