Catégories
Astuces et Design

Consommer les API REST en réaction avec Fetch et Axios – Smashing Magazine

A propos de l'auteur

Shedrack Akintayo est un ingénieur logiciel de Lagos, au Nigéria, qui aime le développement communautaire, l'open source et la création de contenu et de technologie pour les prochains…
Plus à propos
Shedrack

Si vous êtes un développeur React et que vous souhaitez savoir comment commencer à consommer des API dans vos applications React, cet article est pour vous. Shedrack Akintayo explique ce qu'est une API REST et comment créer une application simple qui utilise une API REST en utilisant à la fois l'API Fetch et Axios.

La consommation d'API REST dans une application React peut être effectuée de différentes manières, mais dans ce didacticiel, nous verrons comment utiliser les API REST à l'aide de deux des méthodes les plus populaires connues sous le nom de Axios (un client HTTP basé sur des promesses) et Récupérer l'API (une API Web intégrée au navigateur). 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 booster 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, notamment l'utilisation de JavaScript intégré 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 différentes règles que les développeurs suivent lors de la création d'API.

Les avantages des API REST

  1. Très facile à apprendre 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 utilisée avec n'importe quelle langue ou s'exécuter sur n'importe quelle plate-forme.

Un exemple de réponse 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 l'API Github Open. 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": "User",
"site_admin": false,
"name": "Shedrack akintayo",
"company": null,
"blog": "https://sheddy.xyz",
"location": "Lagos, Nigeria ",
"email": null,
"hireable": true,
"bio": "☕ Software Engineer | | Developer Advocate🥑|| ❤ Everything JavaScript",
"public_repos": 68,
"public_gists": 1,
"followers": 130,
"following": 246,
"created_at": "2017-03-21T12:55:48Z",
"updated_at": "2020-05-11T13:02:57Z"
} 

La réponse ci-dessus est de l'API REST Github lorsque je fais un GET demande 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 le rendre comme nous le souhaitons dans notre application React.

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

le fetch() L'API est une méthode JavaScript intégrée pour obtenir des ressources à partir d'un serveur ou d'un point de terminaison API. C'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 la sémantique d'en-tête HTTP Origin, supplantant leurs définitions distinctes ailleurs.

le fetch() La méthode 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 options init 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 gérer.

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 est revenue d'un fetch() la demande ne sera pas rejetée 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() ne permettra pas l'utilisation de cookies intersites, c'est-à-dire que vous ne pouvez pas effectuer une session intersites en utilisant fetch()
  3. fetch() n'enverra pas non plus de cookies par défaut, sauf si vous définissez credentials dans l'option init.

Paramètres de l'API Fetch

  • resource
    Il s'agit du chemin d'accès à la ressource que vous souhaitez récupérer, il peut s'agir d'un lien direct vers le chemin d'accès à la ressource ou d'un objet de demande
  • init
    Il s'agit d'un objet contenant les paramètres personnalisés ou les informations d'identification que vous souhaitez fournir à votre fetch() demande. Voici quelques-unes des options possibles qui peuvent être contenues dans le init objet:
    • method
      C'est pour spécifier la méthode de requête HTTP, par exemple GET, POST, etc.
    • headers
      Il s'agit de 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
      C'est pour spécifier un corps que vous souhaitez ajouter à votre demande: cela peut être un Blob, BufferSource, FormData, URLSearchParams, USVString, ou ReadableStream objet
    • mode
      C'est pour spécifier le mode que vous souhaitez utiliser pour la demande, par exemple, cors, no-cors, ou same-origin.
    • credentials
      Pour spécifier les informations d'identification de la demande que vous souhaitez utiliser pour la demande, cette option doit être fournie si vous envisagez d'envoyer automatiquement des cookies pour le domaine actuel.

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:

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 juste une réponse HTTP régulière et non le JSON réel. Dans d'autres cas, 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 les applications React

L'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 récupération 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 demande peut être effectuée à l'intérieur d'une méthode de cycle de vie si votre composant est un composant de classe ou à l'intérieur d'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 dans un composant de classe, ce qui signifie que nous devrons le faire dans une méthode de cycle de vie. Dans ce cas particulier, notre demande de récupération sera effectuée dans un componentDidMount méthode de cycle de vie car nous voulons faire la demande juste après le montage de notre composant React.

import React from 'react';

class myComponent extends React.Component {
  componentDidMount() {
    const apiUrl = 'https://api.github.com/users/hacktivist123/repos';
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => console.log('This is your data', data));
  }
  render() {
    return 

my Component has Mounted, Check the browser 'console'

; } } o export default myComponent;

Dans le code ci-dessus, nous créons un composant de classe très simple qui fait une demande de récupération qui enregistre les données finales de la demande de récupération que nous avons faite à l'URL de l'API dans la console du navigateur une fois le composant React terminé de monter.

le fetch() prend le chemin d'accès à 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 le json() , nous enregistrons enfin les données finales de la promesse dans la console.

Consommons une API REST avec la méthode Fetch

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 appartenant à un utilisateur particulier. Pour ce didacticiel, j'utiliserai 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 naviguons vers localhost:3000 après avoir exécuté la commande ci-dessus.

Écran initial de l'application
(Grand aperçu)

Dans ton src dossier, créez un nouveau dossier appelé component. 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 List.js fichier gérera l'affichage de nos référentiels sous forme de liste, et le withListLoading.js Le fichier 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 List.js fichier que nous avons créé dans le dossier des composants, collons le code suivant:

import React from 'react';
const List = (props) => {
  const { repos } = props;
  if (!repos) return null;
  if (repos.length === 0) return 

No repos, sorry

; return (

    Available Public Repositories

    {repos.map((repo) => { return (
  • {repo.name} {repo.description}
  • ); })}
); }; export default List;

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, laissez-moi vous expliquer le code petit à petit.

const { repos } = props;

Nous initialisons une prop pour le composant appelé repos.

if (!repos) return null;
  if (repos.length === 0) return 

No repos, sorry

;

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

return (
    

    Available Public Repositories

    {repos.map((repo) => { return (
  • {repo.name} {repo.description}
  • ); })}
);

Ici, nous cartographions 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 affichons chacun d'eux dans une liste.

export default List;

Ici, nous exportons notre List composant afin que nous puissions l'utiliser ailleurs.

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

import React from 'react';

function WithListLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return ;
    return (
      

Hold on, fetching data may take some time :)

); }; } export default WithListLoading;

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 le courant isLoading l'état du composant qu'il faut est true ou false. Si le courant isLoading l'état est vrai, il affichera un message Attendez, la récupération des données peut prendre un certain temps 🙂. Immédiatement isLoading changements d'état false il rendra le composant qu'il a pris. Dans notre cas, il rendra le liste composant.

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

import React, { useEffect, useState } from 'react';
import './App.css';
import List from './components/List';
import withListLoading from './components/withListLoading';
function App() {
  const ListLoading = withListLoading(List);
  const (AppState, SetAppState) = useState({
    loading: false,
    repos: null,
  });

  useEffect(() => {
    SetAppState({ loading: true });
    const user = `https://api.github.com/users/hacktivist123/repos`;
    fetch(user)
      .then((res) => res.json())
      .then((repos) => {
        SetAppState({ loading: false, repos: repos });
      });
  }, (SetAppState));
  return (
    

My Repositories

Built{' '} 💚 {' '} with by Shedrack Akintayo
); } export default App;

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 avec React Hooks.

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

import React, { useEffect, useState } from 'react';
import './App.css';
import List from './components/List';
import withListLoading from './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 de React les crochets dont nous avons besoin.

const ListLoading = withListLoading(List);
  const (AppState, SetAppState) = useState({
    loading: false,
    repos: null,
  });

Ici, nous créons un nouveau composant appelé ListLoading et attribuer notre withListLoading composant d'ordre supérieur enroulé autour de notre composant de liste. Nous créons alors 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`;
    fetch(user)
      .then((res) => res.json())
      .then((repos) => {
        SetAppState({ loading: false, repos: repos });
      });
  }, (SetAppState));

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

Nous faisons ensuite une base fetch() demande comme nous l'avons vu 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 du référentiel avec les données que nous avons obtenues de la demande.

return (
    

My Repositories

); } export default App;

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

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

État de chargement de l'application
(Grand aperçu)

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:

Application terminée
(Grand aperçu)

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

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
:root {
  --basic-color: #23cc71;
}
.App {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Amiri', serif;
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: row;
}
.container h1 {
  font-size: 60px;
  text-align: center;
  color: var(--basic-color);
}
.repo-container {
  width: 50%;
  height: 700px;
  margin: 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  overflow: scroll;
}
@media screen and (max-width: 600px) {
  .repo-container {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
}
.repo-text {
  font-weight: 600;
}
.repo-description {
  font-weight: 600;
  font-style: bold;
  color: var(--basic-color);
}
.list-head {
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
}
.footer {
  font-size: 15px;
  font-weight: 600;
}
.list {
  list-style: circle;
}

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 App.js fichier et donc nous utilisons ces noms de classe pour styliser notre application.

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

Application stylée
(Grand aperçu)

Maintenant, notre application est bien meilleure. 😊

Voilà 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.

Consommer des 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 une demande, il dispose également d'une fonction intégrée qui offre une protection côté client contre la contrefaçon de demande intersite.

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 de réponse
  • La possibilité d'annuler les demandes
  • Prise en charge des anciens navigateurs
  • Transformation automatique des données JSON

Faire des demandes avec Axios

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

// Make a GET request
axios({
  method: 'get',
  url: 'https://api.github.com/users/hacktivist123',
});

// Make a Post Request
axios({
  method: 'post',
  url: '/login',
  data: {
    firstName: 'shedrack',
    lastName: 'akintayo'
  }
});

Le code ci-dessus montre les façons de base de faire 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(, data(, config)))
  • axios.put(url(, data(, config)))
  • axios.patch(url(, data(, 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:

// Make a GET request with a shorthand method
axios.get(
  url: 'https://api.github.com/users/hacktivist123',
);

// Make a Post Request with a shorthand method
axios.post('/signup', {
    firstName: 'shedrack',
    lastName: '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.

Faire plusieurs demandes avec Axios

Axios offre aux développeurs la possibilité de faire et de gérer des requêtes HTTP simultanées en utilisant le axios.all() méthode. 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 le axios.all() méthode comme ça:

axios.all((
  axios.get('https://api.github.com/users/hacktivist123'),
  axios.get('https://api.github.com/users/adenekan41')
))
.then(response => {
  console.log('Date created: ', response(0).data.created_at);
  console.log('Date created: ', response(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 le created_at objet de chacune des réponses API.

Consommons une API REST avec Axios Client

Dans cette section, tout ce que nous allons faire est de remplacer fetch() avec 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 faire la requête HTTP à 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:

yarn add 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, notre App.js tout ce que nous avons à faire à l'intérieur de notre useEffect() consiste à écrire le code suivant:

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

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

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

Dans ce bloc de code, nous faisons une requête GET, puis nous retournons une promesse qui contient les données du référentiel et affectons 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 rendue de la même manière sans aucun changement.

App avec Axios
(Grand aperçu)

C'est ainsi que nous pouvons utiliser le client Axios pour consommer une API REST.

Fetch vs Axios

Dans cette section, je vais énumérer nos certaines 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 faire 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 que 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
    Il est très facile de définir un délai pour les réponses dans Axios en utilisant le timeout option à l'intérieur de l'objet de demande. Mais dans Fetch, ce n'est pas si facile à faire. La récupération fournit une fonctionnalité similaire en utilisant le AbortController() mais cela prend plus de temps à mettre en œuvre et peut devenir déroutant.

  4. Interception des requêtes HTTP
    Axios permet aux développeurs d'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 demandes 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 du promise.all() méthode, nous pouvons faire plusieurs fetch() demandes à l'intérieur.

Conclusion

Axios et fetch() sont tous d'excellents moyens de consommer des API, mais je vous conseille d'utiliser fetch() lors de la création d'applications relativement petites et utilisez Axios lors de la création de 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 commentaires ci-dessous et je serai heureux de répondre à chacune d'entre elles.

Smashing Editorial(ks, ra, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *