Consommer une API avec React JS

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:

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.

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.

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.

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 :

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 :

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.

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 :

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 :

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.