Axios ist eine beliebte, vielversprechende Bibliothek in JavaScript, um HTTP-Anfragen zu machen. Hier sind die Schritte, die Sie befolgen müssen, um Axios mit React zu verwenden:
1. Installation von Axios:
Zuerst müssen Sie die Axios-Bibliothek in Ihrem Projekt installieren. Sie können es mit npm oder yarn installieren.
Mit npm:
```bash
npm install axios
```
Mit yarn:
```bash
yarn add axios
```
2. Axios in ReactJS importieren:
Nach der Installation müssen Sie Axios in der React-Komponente importieren, wo Sie es verwenden möchten.
```jsx
import axios from ‘axios’;
```
3. Axios verwenden, um eine HTTP-Anfrage zu machen:
Nach dem Importieren können Sie Axios verwenden, um eine HTTP-Anfrage zu machen. Hier ist ein einfaches Beispiel für eine GET-Anfrage.
```jsx
componentDidMount() {
axios.get(‘https://api.example.com/items’)
.then(res => {
const items = res.data;
this.setState({ items });
})
}
```
In diesem Beispiel erhalten Sie eine Liste von Elementen von einer API beim ersten Laden der Komponente.
Für eine POST-Anfrage können Sie `axios.post()` verwenden. Zum Beispiel:
```jsx
axios.post(‘/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone‘
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
```
Hier senden wir Daten an einen Server, der einen neuen Benutzer erstellt.
Wichtig ist auch das Error-Handling, damit Fehler abgefangen werden können:
```jsx
componentDidMount() {
axios.get(‘https://api.example.com/items’)
.then(res => {
const items = res.data;
this.setState({ items });
})
.catch(err => {
console.error(err);
});
}
```
In diesem Fall fangen Sie mögliche Fehler in der HTTP-Anfrage auf und loggen sie in der Konsole.
Für beste Praktiken sollten Sie Ihre Axios-Instanzen und -Anrufe in separate Functionen oder Services auslagern und nicht direkt innerhalb Ihrer reactiven Komponenten arbeiten.
