In ReactJS können Sie HTTP-Anfragen mit vielen verschiedenen Methoden machen, einschließlich eingebauten Browser-APIs und Drittanbieter-Bibliotheken. Eine der am häufigsten verwendeten Bibliotheken ist Axios, aber Sie können auch die eingebaute Fetch-API verwenden.
1) Eingebauten Fetch-API:
```javascript
componentDidMount() {
fetch(‘https://api.example.com/items’)
.then(response => response.json())
.then(data => this.setState({ items: data }));
}
```
Die Fetch-API gibt ein Promise zurück, das auflöst zur Antwort. Sie können `.then` verwenden, um die Antwort in das von Ihrem Endpunkt zurückgegebene Format (in diesem Fall JSON) zu konvertieren.
2) Mit Axios:
Bevor die Axios-Bibliothek verwendet werden kann, muss sie zuerst installiert werden. Sie können dies mit npm oder Yarn tun.
NPM:
```sh
npm install axios
```
YARN:
```sh
yarn add axios
```
Danach können Sie Axios in Ihrer React-Komponente wie folgt verwenden:
```javascript
import React, { Component } from “react”;
import axios from “axios”;
class App extends Component { state = { posts: [] };
componentDidMount() { axios.get(“https://jsonplaceholder.typicode.com/posts”) .then((response) => { this.setState({ posts: response.data }); }); } render() { return ({post.body}
export default App;
```
Bei dieser Methode hat Axios den Vorteil, dass Fehler besser behandelt werden und der Code allgemein sauberer und einfacher zu verstehen ist. Außerdem kann Axios sowohl im Browser als auch im Node.js verwendet werden, während Fetch nur im Browser verfügbar ist.
3) Mit Async/await:
Async/await ist eine moderne Syntax für das Arbeiten mit Promises und bietet eine alternative Möglichkeit, HTTP-Anfragen zu senden:
```javascript
async componentDidMount() {
const response = await fetch(‘https://api.example.com/items’);
const data = await response.json();
this.setState({ items: data });
}
```
Das Schlüsselwort `async` bedeutet, dass die Funktion ein Promise zurückgeben wird; `await` pausiert die Funktion, bis das Promise aufgelöst ist. Das macht den Code leichter zu lesen und zu schreiben, als die Nutzung vieler `.then`-Callbacks.
