Einleitung
Es ist eines der beliebtesten und verfügbaren auf Anfrage verfügbaren http Anforderung clients, und es wird überall verwendet, ob in JavaScript oder Node js.
Aoxis basiert auf Versprechen, d. h. auf jede Anfrage erhalten wir eine Antwort vom Anfrageobjekt.
Anfragen können abgefangen und abgebrochen werden, und es gibt einen integrierten Schutz gegen Cross-Site-Spoofing cliHNO-Seite.
In dieser Veröffentlichung erfahren Sie, wie Axios-Anfragen in React funktionieren. Anhand von Beispielen können Sie die Anfragen auf Ihrem eigenen Server testen.
Was die Bibliothek leisten kann
- Verwendung von XML-Abfragen
- Die richtigen http Anfragen von node.js
- Unterstützt das Versprechen API. Es ist viel einfacher, mit Versprechen zu arbeiten, weil wir die Botschaft trotzdem zurückbekommen
- Fängt Anfragen und Antworten ab
- Storniert Anfragen bei Bedarf
- Durch die automatische Konvertierung in JSON wird Zeitverschwendung beim Kompilieren vermieden
- Unterstützt cliSeitenschutz gegen XSFR
Was erforderlich ist,
- Auf Ihrem Server ist eine Version von Node.js höher als 10.17.xx installiert
- Ihr vorgefertigtes React-Projekt
- In Ihrem Projekt ist die Axios-Bibliothek installiert
Axios zu Ihrem Projekt hinzufügen
Erstellen Sie Ihr Projekt oder gehen Sie zu ihm.
npx create-react-app your-projectDie beliebteste Methode ist die Installation mit dem npm-Paketmanager.
npm install axiosImportieren Sie Aoxis in Ihr Projekt, wo Sie es verwenden möchten.
Erstellen einer POST-Anfrage
Sie müssen eine neue UserAdd.js-Komponente in Ihrem Projekt erstellen.
Geben Sie den Code für die Post-Anfrage in Ihre UserAdd.js-Datei ein, der es dem Benutzer ermöglicht, Daten einzugeben und zu senden API.
nano /mnt/c/Project/UserAdd.jsVersuchen Sie, anhand des Beispiels eine POST-Anfrage auszuführen, und der Benutzer wird hinzugefügt.
const axios = require('axios');
axios
.post('https://myfakeapi.com/api/users/', {
firstName: 'Boris',
lastName: 'Moore'
}) // Using a post request, specifying the user
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});Überprüfen Sie, ob der Code funktioniert, was zu einer Zusage vom Server führt.
Erstellen einer GET-Anfrage
Es ist erforderlich, eine neue Komponente unter einem beliebigen Namen zu erstellen. In unserem Fall verwenden wir den Namen CarList. Diese Komponente muss im Verzeichnis abgelegt werden /mnt/c/Project/. Dieses Unterverzeichnis befindet sich nicht im mnt Verzeichnis zunächst, daher muss es ebenfalls erstellt werden.
mkdir /mnt/c/Project/Gehen Sie mit einem beliebigen Texteditor Ihrer Wahl zu unserem neu erstellten CarList-Dokument.
nano /mnt/c/Project/CarListVersuchen Sie, anhand des Beispiels eine Get-Abfrage durchzuführen, und Sie erhalten eine Liste von Mitsubishi-Fahrzeugen.
const axios = require('axios');
axios.get('https://myfakeapi.com/api/cars/name/Mitsubishi') //Returning pledges using a get-query
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});Als Ergebnis erhalten wir dank Versprechen eine Liste der Daten vom Server.
Erstellen einer Löschanforderung
Sie müssen eine neue PostRemove.js-Komponente in Ihrem Projekt erstellen.
nano /mnt/c/Project/PostRemove.jsVersuchen Sie, anhand des Beispiels eine DELETE-Abfrage durchzuführen. Dadurch wird der Beitrag gelöscht.
componentDidMount() {
axios.delete(`https://reqres.in/api/posts/1`)
.then(() => this.setState({ status: 'Delete successful' }));
}Verwendung einer Basisinstanz in Axios
Für dieses Beispiel müssen Sie ein neues erstellen api.js-Komponente.
nano /mnt/c/Project/myapi.jsDurch die Erstellung dieser Komponente geben wir einen Standardlink für unseren Server zum Empfangen und Senden von Anfragen an.
import axios from 'axios';
export default axios.create({
baseURL: `http://yourapiurl.com/`
});Zum Testen wird die Komponente CarList.js verwendet.
import React from 'react';
import axios from 'axios';
import Api from '/mnt/c/Project/api';
export default class CarList extends React.Component {
\\ . . .
componentDidMount() {
Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
.then(res => {
const cars = res.data;
this.setState({ cars });
})}\\Nach dem Erstellen eines api Komponente müssen wir nicht ständig einen Link zum Server angeben, um Anfragen zu empfangen und zu senden. Sie müssen lediglich den Pfad zur gewünschten Anfrage in der gewünschten Komponente ändern.
Verwenden von Async und Wait
Zum Testen wird die Komponente CarList.js verwendet.
Das Schlüsselwort „await“ ermöglicht die Kommunikation und sendet das Ergebnis als Antwort. Der Wert kann einer Variablen zugewiesen werden.
import API from '/mnt/c/Project/api';
export default class CarList extends React.Component {
componentDidMount() {
const response = await Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
console.log(response);
console.log(response.data);})}Im Beispiel ersetzen wir .then(), stattdessen werden die empfangenen Daten in der Konsole angezeigt. Das Versprechen wird erfüllt und der Wert wird in der Variablen der empfangenen Antwort gespeichert.
Shau
Bevor Sie die Abfragen überprüfen, prüfen Sie, ob Sie über die im Programm angegebenen Abfragen verfügenram Komponente.
In unserer Anleitung bearbeiten wir die Komponente yourapp.js.
import CarList from './components/CarList.js';
import PostRemove from './components/PostRemove.js';
import UserAdd. from './components/UserAdd.js';
function App() {
return (
<div ClassName="App">
<CarList/>
<UserAdd/>
<PostRemove/>
</div>)}Umgang mit Abfragefehlern
Einer der wichtigen Aspekte beim Umgang mit Daten, die wir vom Server erhalten, besteht darin, dass wir sie nur abrufen können, wenn beim Ausführen der Anfrage keine Fehler auftreten. Um Fehler anzuzeigen, können Sie die Catch-Funktion verwenden.
catch (error) { // error handling and displaying in the console
console.log("error get", error);}Wenn beim Ausführen der Abfrage ein Fehler auftritt, gibt diese Funktion den Fehler auf der Konsole aus.
Zusammenfassung
Der positive Aspekt der Axios-Bibliothek ist ihre Fähigkeit, automatisch in JSON zu konvertieren. Wir müssen keine zusätzlichen Manipulationen vornehmen, um ein Objekt in JSON zu konvertieren, da wir es in der Antwort erhalten. Passieren paramWenn wir eine Methode ausführen, können wir bei der Abfrage bestimmte Parameter übergebenrameters zu unserer Anfrage.
In dieser Veröffentlichung haben wir Axios-Bibliotheksabfragen dekonstruiert und wie sie mit React zusammenarbeiten.
