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

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!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt
  • Kennen Sie das Axios-Modul in React?
  • Axios-Modul in React und wie man es verwendet
  • React Axios - domänenübergreifender Zugriff auf einen oder mehrere Domänennamen
  • React verwendet Axios, um API-Netzwerkanforderungen zu kapseln

<<:  So führen Sie mehrere MySQL-Instanzen unter Windows aus

>>:  So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System

Artikel empfehlen

Einführung in die Verwendung des HTML-Elements Noscript

Noscript-Definition und -Verwendung Das Noscript-...

MySQL Serie 8 MySQL Server-Variablen

Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...

MySQL-Interviewfragen: So richten Sie Hash-Indizes ein

Zusätzlich zu den B-Tree-Indizes bietet MySQL auc...

Beispiel zur Erhöhung des Swap-Speichers im CentOS7-System

Vorwort Swap ist eine spezielle Datei (oder Parti...

Spezifische Methode zum Löschen des MySQL-Dienstes

MySQL meldet den folgenden Fehler Ich ging zu „Sy...

Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

2.1 Semantisierung sorgt dafür, dass Ihre Webseit...

Grafische Einführung in den Unterschied zwischen := und = in MySQL

Der Unterschied zwischen := und = = Nur beim Setz...

Erfahren Sie mehr über JavaScript-Iteratoren

Inhaltsverzeichnis Einführung Wie sieht ein Itera...

Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs

Der Befehl „Bash History“ im Linux-System hilft d...

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

Bash-Initialisierungsdateien Interaktive Login-Sh...

Analyse der Implementierung der Nginx Rush-Kaufstrombegrenzungskonfiguration

Aus geschäftlichen Gründen kommt es häufig zu Eil...

So stellen Sie ein SpringBoot-Projekt mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...