Comment utiliser l'API Fetch dans Reactjs ?

L’API Fetch est une fonctionnalité JavaScript moderne pour effectuer des requêtes HTTP. Avec React, vous avez généralement besoin d’effectuer des requêtes HTTP pour récupérer ou enregistrer des données à partir/depuis un serveur.

Voici un exemple de base d’utilisation de l’API Fetch dans un composant React:

```
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: [], }; }

componentDidMount() { fetch(‘http://example.com/movies.json’) .then((response) => response.json()) .then((data) => this.setState({ data })) .catch((error) => console.error(error)); } render() { // Rendre les données dans l’interface utilisateur. // Notez que les données pourraient être non définies jusqu’à ce que la demande soit complète. } } ```

Le code ci-dessus effectue une requête HTTP GET lorsque le composant est monté. Une fois la réponse reçue, elle est convertie en JSON (`.then((response) => response.json())`), puis placée dans l’état du composant (`then((data) => this.setState({ data }))`).

Notez l’usage de `.catch((error) => console.error(error))` à la fin de la chaîne de promesse. C’est pour attraper toute erreur qui pourraient se produire lors de l’exécution de la requête ou lors de la conversion de réponse en JSON. Si vous enlevez cette partie, les erreurs seront non arrêtées et pourront causer des problèmes dans votre application.

Gardez en tête que `Fetch` retourne des `promises`, il est alors nécessaire de gérer les erreurs et les rejets de `promises` qui peuvent survenir.

L’API Fetch est flexible et permet de faire tous types de requêtes HTTP (GET, POST, PUT, DELETE, etc.).

L’API Fetch n’est pas prise en charge dans Internet Explorer. Si vous devez supporter Internet Explorer, vous pouvez utiliser une bibliothèque comme `axios` à la place, ou utiliser des polyfills pour ajouter une prise en charge de Fetch à ces navigateurs.