{"id":6138,"date":"2025-03-17T12:57:21","date_gmt":"2025-03-17T12:57:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ameliorer-code-instance-axios-react\/"},"modified":"2025-03-17T12:57:26","modified_gmt":"2025-03-17T12:57:26","slug":"ameliorer-code-instance-axios-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ameliorer-code-instance-axios-react\/","title":{"rendered":"11.11 Am\u00e9liorer le Code avec une Instance Axios React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Instance Axios React<\/strong> est un outil incontournable pour les d\u00e9veloppeurs travaillant avec React, leur permettant d&rsquo;optimiser les requ\u00eates HTTP. Mettre en place une instance Axios personnalis\u00e9e am\u00e9liore significativement la gestion des appels API, rendant votre code non seulement plus efficace mais aussi plus maintenable. Dans cet article, nous verrons comment cr\u00e9er et utiliser une instance Axios dans un projet React, illustr\u00e9 par des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l\u2019Utilisation d\u2019une Instance Axios avec React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706123262?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play();\n    }\n});\n<\/script>\n\n\n\n<p>L&rsquo;utilisation d&rsquo;une instance Axios permet de centraliser la configuration des requ\u00eates HTTP, comme l&rsquo;URL de base, les en-t\u00eates, et les interceptions. Cela rend le code plus coh\u00e9rent et modifiable si des changements globaux sont n\u00e9cessaires. Pour plus de d\u00e9tails sur l\u2019int\u00e9gration d\u2019Axios avec React, vous pouvez consulter notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/article\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que React &#8211; Introduction et avantages<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Instance Axios Personnalis\u00e9e<\/h3>\n\n\n\n<p>Pour commencer, vous devez installer Axios si ce n\u2019est pas d\u00e9j\u00e0 fait. Ensuite, cr\u00e9ez une instance Axios avec une configuration personnalis\u00e9e pour vos projets. Voici comment configurer une instance de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import axios from 'axios';\n\nconst apiClient = axios.create({\n  baseURL: 'https:\/\/api.example.com',\n  headers: {\n    'Content-Type': 'application\/json',\n    'Accept': 'application\/json',\n  }\n});\n\nexport default apiClient;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer des Intercepteurs pour les Requ\u00eates et R\u00e9ponses<\/h3>\n\n\n\n<p>Les intercepteurs ajoutent de la logique avant qu&rsquo;une requ\u00eate ne soit envoy\u00e9e ou apr\u00e8s qu&rsquo;une r\u00e9ponse soit re\u00e7ue. Cela est utile pour l&rsquo;authentification et la gestion des erreurs. Pour mieux comprendre comment les intercepteurs fonctionnent, consultez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/article\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les pages uniques et multiples dans React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>apiClient.interceptors.request.use(\n  config => {\n    const token = localStorage.getItem('authToken');\n    if (token) config.headers.Authorization = `Bearer ${token}`;\n    return config;\n  }, \n  error => Promise.reject(error)\n);\n\napiClient.interceptors.response.use(\n  response => response,\n  error => {\n    if (error.response.status === 401) {\n      window.location = '\/login';\n    }\n    return Promise.reject(error);\n  }\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;Instance Axios dans un Composant React<\/h3>\n\n\n\n<p>Avec votre instance Axios configur\u00e9e, vous pouvez effectuer des appels API dans vos composants React. Voici comment les utiliser dans un <code>useEffect<\/code> pour r\u00e9cup\u00e9rer des donn\u00e9es lors du montage d&rsquo;un composant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useEffect, useState } from 'react';\nimport apiClient from '.\/apiClient';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    apiClient.get('\/data')\n      .then(response => setData(response.data))\n      .catch(error => console.error('Error fetching data:', error));\n  }, []);\n\n  return (\n    <div>\n      <h2>Donn\u00e9es<\/h2>\n      <ul>\n        {data.map(item => (\n          <li key={item.id}>{item.name}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default DataFetchingComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Erreurs avec Axios et React<\/h3>\n\n\n\n<p>Une interface robuste n\u00e9cessite une gestion ad\u00e9quate des erreurs. Vous pouvez afficher des messages d&rsquo;erreur ou rediriger les utilisateurs en cas de probl\u00e8mes. Pour un exemple pratique, explorez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/article\/maitriser-objets-javascript-developper-react\" target=\"_blank\" rel=\"noopener\">ma\u00eetriser les objets JavaScript en d\u00e9veloppement React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function ErrorHandlingComponent() {\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    apiClient.get('\/data')\n      .then(response => console.log('Data fetched:', response.data))\n      .catch(error => {\n        setError('Une erreur est survenue lors de la r\u00e9cup\u00e9ration des donn\u00e9es.');\n        console.error('Error fetching data:', error);\n      });\n  }, []);\n\n  return (\n    <div>\n      {error ? <p style={{ color: 'red' }}>{error}<\/p> : <p>Donn\u00e9es charg\u00e9es avec succ\u00e8s.<\/p>}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Utiliser une <strong>instance Axios React<\/strong> dans votre projet permet un contr\u00f4le pr\u00e9cis et maintient un code propre et optimis\u00e9. Cela permet de centraliser la gestion des configurations de requ\u00eates et des intercepteurs, offrant une exp\u00e9rience utilisateur fluide et s\u00e9curis\u00e9e. Pour explorer d&rsquo;autres aspects de React et Axios, regardez nos ressources sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/article\/gestion-des-formulaires-react-guide-complet\" target=\"_blank\" rel=\"noopener\">utilisation des formulaires dans React<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/article\/exercices-s-ameliorer-react-guide\" target=\"_blank\" rel=\"noopener\">exercices pour s&rsquo;am\u00e9liorer avec React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\">\n<\/a>\n\n\n<p>Afin de parfaire votre ma\u00eetrise de React, consultez \u00e9galement notre guide sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/article\/qu-est-ce-qu-un-module-css-utiliser-react\" target=\"_blank\" rel=\"noopener\">utilisation des modules CSS avec React<\/a> pour mieux g\u00e9rer votre CSS.<\/p>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Instance Axios React est un outil incontournable pour les d\u00e9veloppeurs travaillant avec React, leur permettant d&rsquo;optimiser les requ\u00eates HTTP. Mettre en place une instance&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3167,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6138"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6138\/revisions"}],"predecessor-version":[{"id":6139,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6138\/revisions\/6139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3167"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}