{"id":6122,"date":"2025-01-20T12:54:58","date_gmt":"2025-01-20T12:54:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/installer-axios-gerer-requetes-ajax-react\/"},"modified":"2025-01-20T12:55:04","modified_gmt":"2025-01-20T12:55:04","slug":"installer-axios-gerer-requetes-ajax-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/installer-axios-gerer-requetes-ajax-react\/","title":{"rendered":"11.3 Installer Axios pour G\u00e9rer les Requ\u00eates AJAX React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Installer Axios AJAX React<\/strong> est une \u00e9tape importante pour toute application web moderne n\u00e9cessitant de g\u00e9rer des requ\u00eates HTTP de mani\u00e8re efficace. Axios est une biblioth\u00e8que promise bas\u00e9e sur HTTP client pour le navigateur et Node.js, facilitant les interactions avec les API de mani\u00e8re \u00e9l\u00e9gante et performante. Voyons comment l&rsquo;installer dans React et l&rsquo;utiliser pour g\u00e9rer les requ\u00eates AJAX.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Axios et ses Avantages<\/strong><\/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\/706121554?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                    \/\/ Pause the video and display the popup\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(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Axios simplifie grandement la gestion des requ\u00eates HTTP en fournissant une API intuitive qui s&rsquo;int\u00e8gre bien avec les promesses JavaScript. Parmi ses avantages, on compte la gestion automatique des JSON, la protection contre les attaques CSRF, et un excellent support pour les requ\u00eates asynchrones, ce qui est essentiel pour cr\u00e9er des applications web r\u00e9actives. Pour comprendre davantage <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\">le fonctionnement de Redux<\/a> et ses avantages, vous pouvez consulter les ressources disponibles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de <strong>Axios<\/strong> dans un Projet React<\/h3>\n\n\n\n<p>Pour commencer \u00e0 utiliser Axios dans votre application React, vous devez d&rsquo;abord l&rsquo;ajouter \u00e0 votre projet. Vous pouvez installer Axios via npm ou yarn, selon votre pr\u00e9f\u00e9rence de gestionnaire de paquets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code># Avec npm\nnpm install axios\n\n# Avec yarn\nyarn add axios\n<\/code><\/pre>\n\n\n\n<p>L&rsquo;installation d&rsquo;Axios est une des \u00e9tapes cl\u00e9s pour <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\">bien d\u00e9buter avec React<\/a>. Ce processus est rapide et vous aidera \u00e0 int\u00e9grer des fonctionnalit\u00e9s complexes dans votre application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9alisons une Requ\u00eate GET avec Axios<\/h3>\n\n\n\n<p>Maintenant qu&rsquo;Axios est install\u00e9, voyons comment effectuer une requ\u00eate GET. Supposons que nous souhaitons r\u00e9cup\u00e9rer des donn\u00e9es d&rsquo;une API publique. Cela peut \u00eatre utile pour divers projets comme <a href=\"https:\/\/wikiform.fr\/codespace\/lister-dynamiquement-composants-react\">lister dynamiquement des composants<\/a> ou afficher des informations \u00e0 partir d&rsquo;une API externe.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    \/\/ Effectuer une requ\u00eate GET vers une API\n    axios.get('https:\/\/jsonplaceholder.typicode.com\/posts')\n      .then(response => {\n        \/\/ Mettre \u00e0 jour l'\u00e9tat avec les donn\u00e9es re\u00e7ues\n        setData(response.data);\n      })\n      .catch(error => {\n        console.error('Erreur lors de la r\u00e9cup\u00e9ration des donn\u00e9es :', error);\n      });\n  }, []);\n\n  return (\n    <div className=\"App\">\n      <h1>Liste de Posts<\/h1>\n      <ul>\n        {data.map(post => (\n          <li key={post.id}>{post.title}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Travailler avec les requ\u00eates GET et POST est fondamental dans <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-react-guide-complet\">la gestion de formulaires dans React<\/a>. Une compr\u00e9hension approfondie vous permettra d&rsquo;offrir des interactions riches aux utilisateurs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Requ\u00eates POST avec Axios<\/h3>\n\n\n\n<p>En plus des requ\u00eates GET, Axios est \u00e9galement utilis\u00e9 pour envoyer des donn\u00e9es \u00e0 un serveur via des requ\u00eates POST. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import axios from 'axios';\n\n\/\/ Exemple de requ\u00eate POST\nconst postData = {\n  title: 'Nouveau Post',\n  body: 'Ceci est le contenu du nouveau post.',\n  userId: 1\n};\n\naxios.post('https:\/\/jsonplaceholder.typicode.com\/posts', postData)\n  .then(response => {\n    console.log('R\u00e9ponse du serveur:', response.data);\n  })\n  .catch(error => {\n    console.error('Erreur lors de l\\'envoi des donn\u00e9es :', error);\n  });\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusions et Ressources Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Gr\u00e2ce \u00e0 Axios, la gestion des requ\u00eates AJAX dans les applications React devient une t\u00e2che beaucoup plus simple et organis\u00e9e. Pour approfondir, vous pouvez consulter la <a href=\"https:\/\/axios-http.com\/\" target=\"_blank\" rel=\"noopener\">documentation officielle de Axios<\/a> et explorer <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">les ressources de React<\/a> pour une int\u00e9gration plus fluide de cette biblioth\u00e8que avec React. Il est \u00e9galement int\u00e9ressant de se pencher sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">la cr\u00e9ation de votre premi\u00e8re application en React<\/a> pour consolider vos comp\u00e9tences et mieux comprendre l&rsquo;architecture des applications modernes.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour ceux qui souhaitent aller plus loin, il est possible de continuer avec la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">d\u00e9couverte des Hooks en React<\/a>, qui sont des outils puissants pour g\u00e9rer l&rsquo;\u00e9tat et am\u00e9liorer le cycle de vie des composants.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><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=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Installer Axios AJAX React est une \u00e9tape importante pour toute application web moderne n\u00e9cessitant de g\u00e9rer des requ\u00eates HTTP de mani\u00e8re efficace. Axios est&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6122","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\/6122","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=6122"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6122\/revisions"}],"predecessor-version":[{"id":6123,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6122\/revisions\/6123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3218"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}