La consommation d'API REST dans une application React peut être effectuée de différentes manières, mais dans ce didacticiel, nous discuterons de la manière dont nous pouvons utiliser les API REST en utilisant deux des méthodes les plus populaires connues sous le nom de Axios (un client HTTP basé sur les promesses) et Fetch API (un navigateur Web intégré API). Je vais discuter et mettre en œuvre chacune de ces méthodes en détail et mettre en lumière certaines des fonctionnalités intéressantes que chacune d'elles a à offrir.

Les API sont ce que nous pouvons utiliser pour suralimenter nos applications React avec des données. Certaines opérations ne peuvent pas être effectuées côté client. Ces opérations sont donc implémentées côté serveur. Nous pouvons ensuite utiliser les API pour consommer les données côté client.

Les API sont constituées d'un ensemble de données, souvent au format JSON avec des points de terminaison spécifiés. Lorsque nous accédons à des données à partir d'une API, nous voulons accéder à des points de terminaison spécifiques dans ce cadre API. On peut aussi dire qu'une API est un accord contractuel entre deux services sur la forme de la demande et de la réponse. Le code n'est qu'un sous-produit. Il contient également les termes de cet échange de données.

Dans React, il existe différentes façons de consommer les API REST dans nos applications, ces méthodes incluent l'utilisation de la méthode JavaScript intégrée fetch () et Axios qui est un client HTTP basé sur les promesses pour le navigateur et Node.js.

Remarque: Une bonne connaissance de ReactJS, React Hooks, JavaScript et CSS vous sera utile au fur et à mesure de votre progression dans ce didacticiel.

Commençons par en savoir plus sur l'API REST.

Qu'est-ce qu'une API REST

Une API REST est une API qui suit ce qui est structuré conformément à la Structure REST pour les API. REST signifie «Representational State Transfer». Il se compose de diverses règles que les développeurs suivent lors de la création d'API.

Les avantages des API REST

1. Très facile à comprendre et à comprendre;
2. Il offre aux développeurs la possibilité d'organiser des applications complexes en ressources simples;
3. Il est facile pour les clients externes de s'appuyer sur votre API REST sans aucune complication;
4. Il est très facile à mettre à l'échelle;
5. Une API REST n'est pas spécifique à une langue ou à une plate-forme, mais peut être consommée avec n'importe quelle langue ou s'exécuter sur n'importe quelle

Un exemple de réponse à une API REST

La façon dont une API REST est structurée dépend du produit pour lequel elle a été conçue – mais les règles de REST doivent être suivies.

L'exemple de réponse ci-dessous provient de la Github Open API . Nous utiliserons cette API pour créer une application React plus loin dans ce didacticiel.

 {
"login": "hacktivist123",
"id": 26572907,
"node_id": "MDQ6VXNlcjI2NTcyOTA3",
"avatar_url": "https://avatars3.githubusercontent.com/u/26572907?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/hacktivist123",
"html_url": "https://github.com/hacktivist123",
"followers_url": "https://api.github.com/users/hacktivist123/followers",
"following_url": "https://api.github.com/users/hacktivist123/following{/other_user}",
"gists_url": "https://api.github.com/users/hacktivist123/gists{/gist_id}",
"starred_url": "https://api.github.com/users/hacktivist123/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/hacktivist123/subscriptions",
"organizations_url": "https://api.github.com/users/hacktivist123/orgs",
"repos_url": "https://api.github.com/users/hacktivist123/repos",
"events_url": "https://api.github.com/users/hacktivist123/events{/privacy}",
"received_events_url": "https://api.github.com/users/hacktivist123/received_events",
"type": "Utilisateur",
"site_admin": false,
"nom": "Shedrack akintayo",
"entreprise": null,
"blog": "https://sheddy.xyz",
"location": "Lagos, Nigéria",
"email": null,
"louable": vrai,
"bio": "☕ Ingénieur logiciel | | Développeur Advocate? || ❤ Tout JavaScript",
"public_repos": 68,
"public_gists": 1,
"followers": 130,
"suivants": 246,
"created_at": "2017-03-21T12: 55: 48Z",
"updated_at": "2020-05-11T13: 02: 57Z"
}

La réponse ci-dessus provient de l'API REST Github lorsque je fais une demande GET au point de terminaison suivant https://api.github.com/users/hacktivist123 . Il renvoie toutes les données stockées sur un utilisateur appelé hacktivist123 . Avec cette réponse, nous pouvons décider de l'afficher comme nous le souhaitons dans notre application React.

Consommation d'API à l'aide de l'API Fetch

L'API fetch () est une méthode JavaScript intégrée pour obtenir des ressources à partir d'un serveur ou d'un point de terminaison API. Il est similaire à XMLHttpRequest mais l'API fetch fournit un ensemble de fonctionnalités plus puissant et plus flexible.

Il définit des concepts tels que CORS et En-tête HTTP Origin sémantique, supplantant leurs définitions distinctes ailleurs.

La méthode fetch () API prend toujours un argument obligatoire, qui est le chemin ou l'URL de la ressource que vous souhaitez récupérer. Il renvoie une promesse qui pointe vers la réponse de la demande, que la demande soit réussie ou non. Vous pouvez également éventuellement passer un objet d'options d'initialisation comme deuxième argument.

Une fois la réponse récupérée, plusieurs méthodes intégrées sont disponibles pour définir le contenu du corps et la manière de le traiter.

La différence Entre l'API Fetch et jQuery Ajax

L'API Fetch est différente de jQuery Ajax de trois manières principales, qui sont:

1. La promesse renvoyée d'une demande de fetch () ne rejettera pas en cas d'erreur HTTP, quelle que soit la nature de l'état de la réponse. Au lieu de cela, il résoudra la demande normalement, si le code d'état de réponse est un code de type 400 ou 500, il définira l'état ok. Une demande sera rejetée uniquement en raison d'une défaillance du réseau ou si quelque chose empêche la demande de se terminer.
2. fetch () n'autorisera pas l'utilisation de cookies intersites, c'est-à-dire que vous ne pouvez pas effectuer de croisement. la session de site utilisant fetch ()
3. fetch () n'enverra pas non plus de cookies par défaut, sauf si vous définissez les informations d'identification dans l'option init.

Paramètres de l'API d'extraction

• ressource
  Il s'agit du chemin d'accès à la ressource que vous souhaitez extraire. Il peut s'agir d'un lien direct vers le chemin d'accès à la ressource ou d'un objet de demande
• init
  Ce est un objet contenant tout paramètre personnalisé ou informations d'identification que vous aimeriez fournir pour votre demande fetch () . Voici quelques-unes des options possibles pouvant être contenues dans l'objet init :
  • méthode
    Ceci permet de spécifier la méthode de requête HTTP, par exemple GET, POST, etc.
  • en-têtes
    Ceci est pour spécifier les en-têtes que vous souhaitez ajouter à votre demande, généralement contenus dans un objet ou un objet littéral.
  • body
    Ceci est pour spécifier un corps que vous voulez à ajouter à votre demande: il peut s'agir d'un Blob BufferSource FormData URLSearchParams USVString ou ReadableStream objet
  • mode
    Ceci permet de spécifier le mode que vous souhaitez utiliser pour la demande, par exemple, cors no-cors ou de même origine .
  • informations d'identification
    Ceci pour spécifier les informations d'identification de demande que vous souhaitez utiliser pour la demande, cette

Syntaxe de base pour l'utilisation de l'API Fetch ()

Une requête de récupération de base est très simple à écrire, jetez un œil au code suivant: [19659053] fetch ('https://api.github.com/users/hacktivist123/repos')
  .then (response => response.json ())
  .then (data => console.log (data));

Dans le code ci-dessus, nous récupérons des données à partir d'une URL qui renvoie des données au format JSON, puis les imprimons sur la console. La forme la plus simple d'utilisation de fetch () prend souvent un seul argument qui est le chemin d'accès à la ressource que vous souhaitez récupérer, puis retourne une promesse contenant la réponse de la demande de récupération. Cette réponse est un objet.

La réponse est simplement une réponse HTTP régulière et non le JSON réel. Dans d'autres, pour obtenir le contenu du corps JSON de la réponse, nous devons changer la réponse en JSON réel en utilisant la méthode json () sur la réponse.

Utilisation de l'API Fetch dans React Apps

Utilisation de l'API Fetch dans React Apps est la manière normale d'utiliser l'API Fetch en javascript, il n'y a pas de changement de syntaxe, le seul problème est de décider où faire la demande de fetch dans nos React Apps. La plupart des requêtes d'extraction ou toute requête HTTP de toute sorte sont généralement effectuées dans un composant React.

Cette requête peut être effectuée dans une méthode de cycle de vie si votre composant est un composant de classe ou dans un useEffect () React Hook si votre composant est un composant fonctionnel.

Par exemple, dans le code ci-dessous, nous ferons une demande de récupération à l'intérieur d'un composant de classe, ce qui signifie que nous aurons pour le faire à l'intérieur d'une méthode de cycle de vie. Dans ce cas particulier, notre demande de récupération sera effectuée à l'intérieur d'une méthode de cycle de vie componentDidMount car nous voulons effectuer la demande juste après le montage de notre composant React.

 importation React de 'react';

La classe myComponent étend React.Component {
  componentDidMount () {
    const apiUrl = 'https://api.github.com/users/hacktivist123/repos';
    chercher (apiUrl)
      .then ((response) => response.json ())
      .then ((data) => console.log ('Ce sont vos données', data));
  }
  render () {
    retour 
 mon composant est monté, vérifiez la 'console' du navigateur 
;
  }
}
o
exporter monComposant par défaut;

Dans le code ci-dessus, nous créons un composant de classe très simple qui effectue une demande de récupération qui enregistre les données finales de la demande de récupération que nous avons effectuée vers l'URL de l'API dans la console du navigateur après la fin du montage du composant React. [19659005] La méthode fetch () emprunte le chemin vers la ressource que nous voulons récupérer, qui est affectée à une variable appelée apiUrl . Une fois la demande d'extraction terminée, elle renvoie une promesse qui contient un objet de réponse. Ensuite, nous extrayons le contenu du corps JSON de la réponse en utilisant la méthode json () enfin nous enregistrons les données finales de la promesse dans la console.

Consommons une API REST avec la méthode Fetch [19659002] Dans cette section, nous allons créer une application React simple qui consomme une API externe, nous utiliserons la méthode Fetch pour consommer l'API.

L'application simple affichera tous les référentiels et leur description qui appartiennent à un utilisateur particulier. Pour ce tutoriel, je vais utiliser mon nom d'utilisateur GitHub, vous pouvez également utiliser le vôtre si vous le souhaitez.

La première chose que nous devons faire est de générer notre application React en utilisant create-react-app :

 npx create-react-app myRepos

La commande ci-dessus amorcera une nouvelle application React pour nous. Dès que notre nouvelle application a été créée, il ne reste plus qu'à exécuter la commande suivante et à commencer le codage:

 npm start

Si notre React est créé correctement, nous devrions le voir dans la fenêtre de notre navigateur lorsque nous accédons à localhost: 3000 après avoir exécuté la commande ci-dessus.

Dans votre dossier src créez un nouveau dossier appelé composant . Ce dossier contiendra tous nos composants React. Dans le nouveau dossier, créez deux fichiers intitulés List.js et withListLoading.js . Ces deux fichiers contiendront les composants qui seront nécessaires dans notre application.

Le fichier List.js gérera l'affichage de nos référentiels sous forme de liste, et le avecListLoading. Le fichier js contiendra un composant d'ordre supérieur qui sera affiché lorsque la demande de récupération que nous effectuerons est toujours en cours.

Dans le fichier List.js que nous avons créé dans le dossier des composants, collons le code suivant:

 import React from 'react';
const List = (accessoires) => {
  const {repos} = accessoires;
  if (! repos) return null;
  if (repos.length === 0) return 
 Pas de repos, désolé 
;
  revenir (
    

      
 Référentiels publics disponibles 
      {repos.map ((repo) => {
        revenir (
          

             {repo.name} 
             {repo.description} 
          
        );
      })}
    
  );
};
exporter la liste par défaut;

Le code ci-dessus est un composant de base de la liste React qui afficherait les données, dans ce cas, le nom des référentiels et leurs descriptions dans une liste.

Maintenant, permettez-moi d'expliquer le code petit à petit.

 const {repos} = accessoires;

Nous initialisons un accessoire pour le composant appelé repos.

 if (! Repos) return null;
  if (repos.length === 0) return 
 Pas de repos, désolé 
;

Ici, tout ce que nous faisons est de faire une instruction conditionnelle qui affichera un message lorsque la longueur des dépôts que nous recevons de la demande que nous faisons est égale à zéro.

 return (
    

      
 Référentiels publics disponibles 
      {repos.map ((repo) => {
        revenir (
          

             {repo.name} 
             {repo.description} 
          
        );
      })}
    
  );

Ici, nous mappons à travers chacun des référentiels qui seront fournis par la demande d'API que nous faisons et en extrayant chacun des noms de référentiels et leurs descriptions, puis nous les affichons chacun dans une liste.

 export default List ;

Ici, nous exportons notre composant List afin de pouvoir l'utiliser ailleurs.

Dans le fichier withListLoading.js que nous avons créé dans le dossier des composants, collons-le le code suivant:

 import React from 'react';

fonction WithListLoading (Component) {
  fonction de retour WihLoadingComponent ({isLoading, ... props}) {
    if (! isLoading) return ;
    revenir (
      

        Attendez, la récupération des données peut prendre un certain temps :)
      
    );
  };
}
exporter WithListLoading par défaut;

Le code ci-dessus est un composant React d'ordre supérieur qui prend un autre composant et renvoie ensuite une certaine logique. Dans notre cas, notre composant supérieur attendra pour vérifier si l'état en cours de chargement du composant qu'il prend est vrai ou faux . Si l'état actuel de isLoading est vrai, il affichera un message Attendez, la récupération des données peut prendre un certain temps:) . Immédiatement l'état isLoading devient faux il rendra le composant qu'il a pris. Dans notre cas, il rendra le composant List .

Dans votre fichier * App.js à l'intérieur du dossier src collons le code suivant:

 import React, {useEffect, useState} de 'react';
import './App.css';
importer la liste à partir de './components/List';
importer avecListLoading depuis './components/withListLoading';
fonction App () {
  const ListLoading = withListLoading (List);
  const [AppState, SetAppState] = useState ({
    chargement: faux,
    repos: null,
  });

  useEffect (() => {
    SetAppState ({loading: true});
    const user = `https: // api.github.com / users / hacktivist123 / repos`;
    récupérer (utilisateur)
      .then ((res) => res.json ())
      .then ((repos) => {
        SetAppState ({chargement: faux, repos: repos});
      });
  }, [SetAppState]);
  revenir (
    

      

        
 Mes référentiels 
      
      

        
      
      
    
  );
}
exporter l'application par défaut;

Notre App.js est un composant fonctionnel qui utilise des crochets React pour gérer l'état et les effets secondaires. Si vous n'êtes pas familier avec React Hooks, lisez mon Guide de démarrage de React Hooks.

Permettez-moi d'expliquer le code ci-dessus petit à petit.

 importez React, {useEffect, useState} à partir de 'réagir';
import './App.css';
importer la liste à partir de './components/List';
importer avecListLoading depuis './components/withListLoading';

Ici, nous importons tous les fichiers externes dont nous avons besoin ainsi que les composants que nous avons créés dans notre dossier de composants. Nous importons également les React Hooks dont nous avons besoin depuis React.

 const ListLoading = withListLoading (List);
  const [AppState, SetAppState] = useState ({
    chargement: faux,
    repos: null,
  });

Ici, nous créons un nouveau composant appelé ListLoading et assignons notre avecListLoading composant d'ordre supérieur enroulé autour de notre composant list. Nous créons ensuite nos valeurs d'état loading et repos en utilisant le useState () React Hook.

 useEffect (() => {
    SetAppState ({loading: true});
    const user = `https: // api.github.com / users / hacktivist123 / repos`;
    récupérer (utilisateur)
      .then ((res) => res.json ())
      .then ((repos) => {
        SetAppState ({chargement: faux, repos: repos});
      });
  }, [SetAppState]);

Ici, nous initialisons un useEffect () React Hook. Dans le crochet useEffect () nous définissons notre état de chargement initial sur true, tandis que cela est vrai, notre composant d'ordre supérieur affichera un message.
Nous créons ensuite une variable constante appelée utilisateur et affectons l'URL de l'API à partir de laquelle nous obtiendrons les données des référentiels.

Nous faisons ensuite une requête de base fetch () comme nous avons discuté ci-dessus, puis une fois la demande terminée, nous définissons l'état de chargement de l'application sur faux et remplissons l'état de repos avec les données que nous avons obtenues de la demande.

 return (
    

      

        
 Mes référentiels 
      
      

        
      
    
  );
}
exporter l'application par défaut;

Ici, nous rendons simplement le composant auquel nous avons affecté notre composant d'ordre supérieur et remplissons également les accessoires isLoading et repos avec leur valeur d'état.

Maintenant, nous devrions le voir dans notre navigateur, lorsque la demande de récupération est toujours en cours, avec l'aimable autorisation de notre composant withListLoading d'ordre supérieur:

Maintenant, lorsque la demande de récupération s'est terminée avec succès, nous devrions voir les référentiels affichés dans un format de liste comme ci-dessous:

Maintenant, stylisons notre projet un peu, dans votre fichier App.css copiez et collez ce code.

 @import url ('https://fonts.googleapis.com/css2?family=Amiri&display = swap ');
:racine {
  - couleur de base: # 23cc71;
}
.App {
  dimensionnement de la boîte: border-box;
  affichage: flex;
  justifier-contenu: centre;
  align-items: centre;
  flex-direction: colonne;
  famille de polices: 'Amiri', serif;
  débordement caché;
}
.récipient {
  affichage: flex;
  flex-direction: rangée;
}
.container h1 {
  taille de police: 60px;
  alignement du texte: centre;
  couleur: var (- couleur de base);
}
.repo-container {
  largeur: 50%;
  hauteur: 700px;
  marge: 50px;
  boîte-ombre: 0 2px 10px rgba (0, 0, 0, 0,3);
  débordement: défilement;
}
@media screen and (max-width: 600px) {
  .repo-container {
    largeur: 100%;
    marge: 0;
    box-shadow: aucun;
  }
}
.repo-text {
  poids de police: 600;
}
.repo-description {
  poids de police: 600;
  style de police: gras;
  couleur: var (- couleur de base);
}
.list-head {
  alignement du texte: centre;
  poids de la police: 800;
  transformation de texte: majuscule;
}
.bas de page {
  taille de police: 15px;
  poids de police: 600;
}
.liste {
  style liste: cercle;
}

Donc, dans le code ci-dessus, nous stylisons notre application pour qu'elle soit plus agréable aux yeux, nous avons attribué différents noms de classe à chaque élément de notre fichier App.js et nous utilisons donc ces classes

Une fois que nous avons appliqué notre style, notre application devrait ressembler à ceci:

Maintenant, notre application ressemble beaucoup meilleur. 1965

Voilà donc comment nous pouvons utiliser l'API Fetch pour consommer une API REST. Dans la section suivante, nous discuterons d'Axios et de la façon dont nous pouvons l'utiliser pour consommer la même API dans la même application.

Consommation d'API avec Axios

Axios est un client HTTP basé sur des promesses facile à utiliser pour le navigateur et node.js. Comme Axios est basé sur des promesses, nous pouvons profiter de l'async et attendre un code plus lisible et asynchrone. Avec Axios, nous avons la possibilité d'intercepter et d'annuler les demandes, il dispose également d'une fonction intégrée qui offre une protection côté client contre la falsification de demandes intersites.

Caractéristiques d'Axios

• Interception des demandes et des réponses
• Gestion simplifiée des erreurs
• Protection contre XSRF
• Prise en charge de la progression du téléchargement
• Délai d'expiration de la réponse
• Possibilité d'annuler les demandes
• Prise en charge des navigateurs plus anciens
• Transformation automatique des données JSON [19659143] Faire des requêtes avec Axios

  Faire des requêtes HTTP avec Axios est assez facile. Le code ci-dessous explique comment effectuer une requête HTTP.

   // Faire une requête GET
  axios ({
    méthode: 'get',
    url: 'https://api.github.com/users/hacktivist123',
  });
  
  // Faire une demande de publication
  axios ({
    méthode: 'post',
    url: '/ login',
    Les données: {
      firstName: 'shedrack',
      nom: 'akintayo'
    }
  });
  

  Le code ci-dessus montre les méthodes de base pour effectuer une requête HTTP GET et POST avec Axios.

  Axios fournit également un ensemble de méthodes abrégées pour effectuer différentes requêtes HTTP. Les méthodes sont les suivantes:

  • axios.request (config)
  • axios.get (url [, config])
  • axios.delete (url [, config])
  • axios.head (url [, config])
  • axios.options (url [, config])
  • axios .post (url [données[, config]])
  • axios.put (url [données[, config]])
  • axios.patch (url [[, config]])

  Par exemple, si nous voulons faire une requête similaire comme l'exemple de code ci-dessus mais avec les méthodes abrégées, nous pouvons le faire comme ceci:

   // Faire une requête GET avec une méthode abrégée
  axios.get (
    url: 'https://api.github.com/users/hacktivist123',
  );
  
  // Faire une demande de publication avec une méthode abrégée
  axios.post ('/ signup', {
      firstName: 'shedrack',
      nom: 'akintayo'
  });
  

  Dans le code ci-dessus, nous faisons la même demande que ce que nous avons fait ci-dessus mais cette fois avec la méthode raccourcie. Axios offre une flexibilité et rend vos requêtes HTTP encore plus lisibles.

  Création de plusieurs requêtes avec Axios

  Axios offre aux développeurs la possibilité de créer et de gérer des requêtes HTTP simultanées à l'aide de la méthode axios.all () . Cette méthode prend un tableau d'arguments et renvoie un seul objet de promesse qui ne se résout que lorsque tous les arguments passés dans le tableau sont résolus.

  Par exemple, nous pouvons faire plusieurs demandes à l'API GitHub en utilisant les axios . all () méthode comme ceci:

   axios.all ([
    axios.get('https://api.github.com/users/hacktivist123'),
    axios.get('https://api.github.com/users/adenekan41')
  ])
  .then (response => {
    console.log ('Date de création:', réponse [0] .data.created_at);
    console.log ('Date de création:', réponse [1] .data.created_at);
  });
  

  Le code ci-dessus fait des requêtes simultanées à un tableau d'arguments en parallèle et renvoie les données de réponse, dans notre cas, il enregistrera sur la console l'objet created_at de chacune des réponses de l'API. [19659164] Consommons une API REST avec le client Axios

  Dans cette section, tout ce que nous allons faire est de remplacer la méthode fetch () par Axios dans notre application React existante. Tout ce que nous devons faire est d'installer Axios puis de l'utiliser dans notre fichier App.js pour effectuer la requête HTTP auprès de l'API GitHub.

  Maintenant, installons Axios dans notre application React en exécutant l'une des opérations suivantes:

  Avec NPM:

   npm install axios
  

  Avec fil:

   fil ajoute axios
  

  Une fois l'installation terminée, nous devons importer des axios dans notre App.js. Dans notre App.js, nous ajouterons la ligne suivante en haut de notre fichier App.js:

   import axios from 'axios'
  

  Après avoir ajouté la ligne de code de notre App.js tout ce que nous avons à faire dans notre useEffect () est d'écrire le code suivant:

   useEffect (() = > {
      SetAppState ({loading: true});
      const user = 'https://api.github.com/users/hacktivist123/repos';
      axios.get (utilisateur) .then ((repos) => {
        const allRepos = repos.data;
        SetAppState ({chargement: faux, repos: allRepos});
      });
    }, [SetAppState]);
  

  Si vous l'avez remarqué, nous y avons remplacé l'API fetch par la méthode sténographique Axios axios.get pour faire une demande get à l'API.

   axios. get (user) .then ((repos) => {
        const allRepos = repos.data;
        SetAppState ({chargement: faux, repos: allRepos});
      });
  

  Dans ce bloc de code, nous faisons une requête GET puis nous retournons une promesse qui contient les données de repos et assignant les données à une variable constante appelée allRepos . Nous définissons ensuite l'état de chargement actuel sur false et transmettons également les données de la demande à la variable d'état de repos.

  Si nous avons tout fait correctement, nous devrions voir notre application toujours restituée de la même manière sans aucun changement.

  

  Voici donc comment utiliser le client Axios pour consommer une API REST.

  Récupérer vs Axios

  Dans cette section, je serai énumérant certaines de nos fonctionnalités, puis je parlerai de la façon dont Fetch et Axios prennent en charge ces fonctionnalités.

  1. Syntaxe de base
     Fetch et Axios ont tous deux des syntaxes très simples pour effectuer des requêtes. Mais Axios a un avantage parce qu'Axios convertit automatiquement une réponse en JSON, donc lorsque vous utilisez Axios, nous sautons l'étape de conversion de la réponse en JSON, contrairement à Fetch () où nous devons encore convertir la réponse en JSON. Enfin, les méthodes abrégées d'Axios nous permettent de simplifier des requêtes HTTP spécifiques.

  2. Compatibilité du navigateur
     L'une des nombreuses raisons pour lesquelles les développeurs préfèrent Axios à Fetch est parce qu'Axios est pris en charge sur les principaux navigateurs et versions contrairement à Fetch qui n'est pris en charge que dans Chrome 42+, Firefox 39+, Edge 14+ et Safari 10.1 +.

  3. Gestion du délai de réponse
     Définition d'un délai d'expiration pour les réponses est très facile à faire dans Axios en utilisant l'option timeout dans l'objet request. Mais dans Fetch, ce n'est pas si facile à faire. La récupération fournit une fonctionnalité similaire en utilisant l'interface AbortController () mais elle prend plus de temps à implémenter et peut être source de confusion.

  4. Interception des requêtes HTTP
     Axios permet les développeurs pour intercepter les requêtes HTTP. Les intercepteurs HTTP sont nécessaires lorsque nous devons modifier les demandes HTTP de notre application vers le serveur. Les intercepteurs nous permettent de le faire sans avoir à écrire de code supplémentaire.

  5. Faire plusieurs requêtes simultanément
     Axios nous permet de faire plusieurs requêtes HTTP en utilisant le axios.all () (j'en ai parlé plus haut). fetch () fournit la même fonctionnalité avec l'utilisation de la méthode promise.all () nous pouvons y faire plusieurs requêtes fetch () . [19659194] Conclusion

     Axios et fetch () sont tous d'excellents moyens de consommer des API, mais je vous conseille d'utiliser fetch () lors de la construction d'applications relativement petites et d'utiliser Axios lors de la construction grandes applications pour des raisons d'évolutivité.
     J'espère que vous avez apprécié ce tutoriel, vous pouvez toujours en savoir plus sur la consommation d'API REST avec Fetch ou Axios dans les références ci-dessous. Si vous avez des questions, vous pouvez les laisser dans la section des commentaires ci-dessous et je serai heureux d'y répondre.

     Ressources connexes

     (ks, ra, il)