Consommer une API avec React JS
Tags: javascript, react, axios, api
Published: 2024-03-30 22:14:23

## Introduction
JavaScript gère les opérations `asynchrones` à l'aide de fonctions de rappel `callbacks`. Ces callbacks sont exécutés lorsque l'opération est terminée, indiquant un succès ou un échec et fournissant les données associées.

L'exemple suivant illustre le concept de fonctions de rappel:

```javascript
function doAppelAsync(success, failure){
    // On appelle une API
    if (SUCCEED)
        success(resp)
    else
        failure(err)
}

success (response) {
    // On traite notre réponse
}

failure (error) {
    // On traite notre erreur
}

doAppelAsync(success, failure)
```

## Promesses
Une `promesse` est un objet qui représente l'achèvement ou l'échec d'une opération asynchrone. Elle permet de traiter les opérations asynchrones de manière plus lisible et plus facile à comprendre. Elles sont `non-bloquantes`.

Une `promesse` peut être dans l'un des trois états suivants:
- `pending`: L'état initial, ni résolu ni rejeté.
- `fulfilled`: L'opération asynchrone a réussi.
- `rejected`: L'opération asynchrone a échoué.

Lorsqu'une API supporte les promesses, on peut exécuter une opération asynchrone et attendre le résultat. 
Nous verrons dans l'exemple suivant l'utilisation de la méthode `then` pour traiter le résultat d'une promesse.

```javascript
doAppelAsync()
.then(response => {
    // On traite notre réponse
})
```

La méthode `then` retourne une `promesse`. On peut enchaîner plusieurs `then` pour traiter les données de manière séquentielle.

```javascript
doAppelAsync()
.then(response => // On traite notre réponse)
.then(data => // On traite nos données)
```

On peut également utiliser la méthode `catch` pour traiter les erreurs.

```javascript
doAppelAsync()
.then(response => // On traite notre réponse)
.then(data => // On traite nos données)
.catch(error => // On traite notre erreur)
```

## Utilisation de fetch API

La Fetch API en JavaScript offre une manière simple et flexible de faire des requêtes réseau et d'interagir avec des ressources à travers le web. Comparée à l'ancienne méthode basée sur XMLHttpRequest, Fetch API est plus propre, plus moderne et promet une syntaxe plus claire et intuitive.

**Syntaxe de base :**
La syntaxe de base de Fetch API consiste en l'utilisation de la fonction `fetch()` qui prend en paramètre l'URL de la ressource à récupérer et retourne une promesse. Cette promesse résoudra en une réponse (`Response`) une fois que la requête sera complétée, qu'elle soit réussie ou non.

**Exemple :**
```javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });
```

Dans cet exemple, nous effectuons une requête GET à l'URL `'https://api.example.com/data'`. Une fois que la réponse est reçue, nous vérifions si la requête est réussie (avec `response.ok`). Si c'est le cas, nous convertissons la réponse en JSON et l'utilisons. Sinon, une erreur est lancée et capturée dans le bloc `catch`.

**Envoyer des données avec une requête POST :**
Fetch API permet également d'envoyer des données avec une requête POST en incluant un objet de configuration en deuxième paramètre de la fonction `fetch()`.

**Exemple :**
```javascript
const userData = {
  username: 'JohnDoe',
  email: 'john@example.com'
};

fetch('https://api.example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
```

Dans cet exemple, nous envoyons un objet `userData` au serveur via une requête POST. L'objet `userData` est d'abord converti en JSON à l'aide de `JSON.stringify()`. Nous spécifions également le type de contenu dans les en-têtes (`headers`) de la requête.

## Librairie Axios

Axios est une bibliothèque JavaScript populaire utilisée pour effectuer des requêtes HTTP basées sur des promesses, à la fois depuis un navigateur et depuis Node.js. Avec une syntaxe simple et concise, Axios simplifie la communication avec les serveurs et offre de nombreuses fonctionnalités utiles telles que la gestion automatique des erreurs et la transformation des données.

**Installation :**
Pour commencer à utiliser Axios, vous pouvez l'installer via npm ou inclure le script CDN dans votre fichier HTML.

```bash
npm install axios
```

**Syntaxe de base :**
Axios utilise une syntaxe simple et expressive pour effectuer des requêtes HTTP. Il expose des méthodes telles que `axios.get()`, `axios.post()`, `axios.put()`, `axios.delete()` pour effectuer des opérations CRUD.

**Exemple :**
```javascript
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was a problem with the request:', error);
  });
```

Dans cet exemple, nous utilisons `axios.get()` pour effectuer une requête GET à l'URL spécifiée. Une fois que la réponse est reçue, nous accédons aux données de réponse via `response.data`.

**Envoyer des données avec une requête POST :**
Axios facilite l'envoi de données avec une requête POST en passant un objet de données en deuxième paramètre de la méthode correspondante.

**Exemple :**
```javascript
const userData = {
  username: 'JohnDoe',
  email: 'john@example.com'
};

axios.post('https://api.example.com/user', userData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was a problem with the request:', error);
  });
```

Dans cet exemple, nous utilisons `axios.post()` pour envoyer un objet `userData` au serveur via une requête POST. Les données sont automatiquement converties en JSON avant d'être envoyées.

## Différences entre Fetch API et Axios
**Différence entre Fetch API et Axios en JavaScript : Un Aperçu Comparatif**

Fetch API et Axios sont deux bibliothèques couramment utilisées en JavaScript pour effectuer des requêtes HTTP. Bien qu'elles partagent des fonctionnalités similaires, elles présentent également quelques différences importantes en termes de syntaxe, de fonctionnalités et de compatibilité.

**1. Syntaxe :**
   - **Fetch API :** Fetch API utilise une syntaxe basée sur les promesses, avec l'utilisation de la fonction `fetch()`. Elle suit une approche plus moderne et native pour effectuer des requêtes HTTP.
   - **Axios :** Axios utilise une syntaxe similaire à celle de Fetch API, mais expose différentes méthodes pour différents types de requêtes, comme `axios.get()`, `axios.post()`, etc. Cela peut rendre le code légèrement plus verbeux que Fetch API, mais offre une clarté supplémentaire dans la manière de définir le type de requête.

**2. Gestion des erreurs :**
   - **Fetch API :** La gestion des erreurs avec Fetch API nécessite une vérification explicite de la propriété `ok` de l'objet `Response`. Cela peut rendre la gestion des erreurs un peu plus verbeuse.
   - **Axios :** Axios offre une gestion automatique des erreurs pour toutes les requêtes. Il rejette automatiquement la promesse en cas d'erreur HTTP (status code autre que 2xx) sans nécessiter de vérification explicite.

**3. Compatibilité :**
   - **Fetch API :** Fetch API est une API native du navigateur moderne et est prise en charge par la plupart des navigateurs modernes. Cependant, elle peut nécessiter l'utilisation de polyfills pour une compatibilité totale avec certains navigateurs plus anciens.
   - **Axios :** Axios est une bibliothèque externe qui peut être utilisée aussi bien dans les navigateurs que dans Node.js. Elle est également compatible avec les anciens navigateurs et fournit une couche de compatibilité supplémentaire pour gérer les différentes implémentations de XHR dans les navigateurs.

**4. Fonctionnalités supplémentaires :**
   - **Fetch API :** Fetch API est limitée aux fonctionnalités de base de récupération de données et d'envoi de données avec les requêtes HTTP. Elle ne fournit pas de fonctionnalités supplémentaires telles que l'annulation de requête, la gestion des intercepteurs, etc.
   - **Axios :** Axios offre plusieurs fonctionnalités supplémentaires telles que l'annulation de requête, la transformation automatique des données, la gestion des intercepteurs de requête et de réponse, etc. Ceci la rend plus polyvalente pour des cas d'utilisation avancés.

## Conclusion
La consommation d'APIs est une tâche courante dans le développement d'applications web modernes. Les promesses, Fetch API et Axios sont des outils essentiels pour effectuer des requêtes HTTP de manière asynchrone et gérer les réponses de manière efficace. Chacun de ces outils offre des avantages et des fonctionnalités uniques, et le choix entre eux dépendra des besoins spécifiques de votre projet et de vos préférences personnelles.