Maîtriser l'intégration d'API dans React avec Axios | Intégrer votre application avec le backend

1. Introduction du cours: Bienvenue dans les cours dans lesquels nous allons maîtriser l' intégration des API dans React. m'appelle Fassel et je suis ravi de vous faire découvrir monde passionnant de l'intégration des API dans le monde de React Je suis un entrepreneur passionné par l'enseignement en ligne Au cours de ma carrière, j'ai créé de nombreuses applications robustes qui ont été utilisées par des millions d' utilisateurs à travers le monde Je suis ici pour partager mon expérience et mes connaissances avec vous tous. Dans le monde dynamique d'aujourd'hui, l'intégration des API est l' un des aspects importants lorsqu'il s'agit de créer une application évolutive adaptée à la production. Chaque application Web que vous voyez possède un front-end et un back-end, et si vous créez un front-end, il est essentiel que vous compreniez comment intégrer et si vous créez un front-end, il est essentiel que vous compreniez comment intégrer votre application et communiquer avec le serveur principal Tout au long de notre parcours, nous aborderons en profondeur l'intégration des API avec React. Nous utiliserons l' axe pour la même chose. À propos du cours, celui-ci couvre de nombreux aspects de l' intégration des API et des appels d'API. Par exemple, chaque fois que vous effectuez un appel d'API, il est probable que vous n' obteniez pas de réponse immédiate. Alors, comment pouvez-vous gérer le chargement afin d'améliorer l'expérience utilisateur et comment pouvez-vous gérer les états d'erreur ? Nous simplifierons également le processus d'appel d'API, et nous verrons comment cela peut être fait et réalisé avec Axis. Nous verrons également comment vous pouvez effectuer appels EPI simultanés à l'aide d'axis Nous avons également un scénario dans lequel nous couvrirons différents types de requêtes EPI telles que get request, post request. Nous améliorerons la sécurité en utilisant un intercepteur Donc, toutes ces fonctionnalités sont toutes ces choses que nous allons aborder dans ce cours en particulier. Et à la fin de ce cours, je peux vous garantir que vous aurez les compétences nécessaires pour intégrer n'importe quel type d'EPI dans votre application React en toute confiance et sans aucune aide Et cela vous ouvrirait des possibilités infinies dans le monde du développement Web. À qui s'adresse ce cours ? Ce cours est donc parfait pour tous ceux qui cherchent à améliorer leurs compétences en matière de développement de React Donc, que vous soyez un développeur débutant, un développeur expérimenté ou un développeur intermédiaire ou que vous soyez simplement quelqu'un qui explore comment les EPI peuvent être intégrés dans des applications frontales, alors ce cours est peuvent être intégrés dans des applications frontales, parfait pour vous tous Avec cet ensemble, êtes-vous prêt à transformer la façon dont vous gérez les API dans votre application Web créée à l'aide de React ? Je suis très heureuse de vous faire suivre ce cours, et je vous verrai de l'autre côté. 2. Préparer un projet React: Salut, voilà. Il est donc temps de commencer à créer notre application React, et nous allons le faire à l'aide de la ligne de commande. Donc, tout d'abord, je vais me diriger ou naviguer via la ligne de commande dans le dossier du projet. Maintenant, ce que je veux dire par dossier de projet, c'est un dossier de mon choix dans lequel je souhaite organiser mes projets React, d'accord ? Donc, ce que vous pouvez faire, c'est vous rendre dans le Finder. Par exemple, si vous êtes sur Mac, vous pouvez accéder au Finder ou si vous êtes sous Windows comme moi, vous pouvez accéder à Explorer, à droite, et créer un dossier à l' emplacement de votre choix, vous pouvez appeler le dossier comme vous le souhaitez. Je l'appellerais React. Ensuite, à partir de la ligne de commande, vous pouvez simplement accéder à l'emplacement où vous avez créé le dossier. J'ai donc créé ce dossier de réaction ici à cet emplacement particulier, et le CD est la commande, qui est le changement de répertoire, et il m'aide à naviguer ou à me rendre dans ce dossier en particulier ou à me trouver dans ce dossier depuis la ligne de commande. Maintenant que je suis dans ce dossier en particulier, je vais effacer tout le reste. C'est bon. Maintenant, dans ce dossier en particulier, je vais commencer à créer mon application React. Et pour cela, je vais utiliser NPX, d'accord ? Oups. J'ai donc déjà créé quelques applications React auparavant. Vous pouvez donc voir cette suggestion ici, d'accord, mais je ne peux rien y faire. OK ? Mais ignorez cette suggestion pour le moment, car ce terminal en particulier fait, peu importe ce qu'il voit dans votre historique, il ne cesse de vous suggérer, ce qui est une bonne chose. Vous montrer l'intégralité de la commande, c'est très bien. Donc, NPX, je vais utiliser NPX. OK ? Maintenant, NPX est une bonne syntaxe, il est utilisé pour exécuter les packages de nœuds, ou il est utilisé pour exécuter les packages Ensuite, nous allons utiliser l'application Create React. C'est bon. Maintenant, qu' est-ce que Create React App. L'application Create React est une sorte d'outil qui vous aide à créer l' ensemble de l'application React. Maintenant, pourquoi en faisons-nous usage ? Parce que, vous savez, le projet React doit être organisé d'une certaine manière. Par exemple, il doit avoir le dossier SRC. Il a besoin de quelques fichiers. Et tous ces éléments sont réunis et ils vous permettent, ou ils permettent à votre application, de fonctionner de manière fluide, n'est-ce pas ? Vous pouvez donc également créer manuellement ces fichiers. Mais il s'agit d'un outil qui vous permet de créer ou de configurer correctement la structure de l'application. OK ? Ensuite, je vais simplement mentionner le nom de mon application, afin que je puisse l'appeler application MyRact, quelque chose comme ça OK. Et ce que je peux faire, c'est simplement appuyer sur Entrée. Au moment où j'appuie sur Entrée, cela va créer un dossier à cet emplacement particulier. Donc, à cet endroit précis, il va créer ce dossier. Pourquoi crée-t-il un dossier à cet emplacement ? Parce que j'ai accédé à ce dossier depuis le terminal, et ce sera le nom du dossier sous lequel existeront tous les fichiers de mon projet React OK ? Vous pouvez donc appuyer sur Entrée, et vous devriez voir une sorte de traitement se produire. Vous pouvez donc voir la création d'une nouvelle application React à cet endroit précis. Il est en train d'installer certains packages, ce qui peut prendre quelques minutes. Il est donc en train de s'installer. vous indique également ce qu' il est en train d'installer. Il installe React, React Dom, React Scripts, et tout ce dont il a besoin. Nous attendrons donc un moment jusqu'à ce que tout ce processus soit terminé et que nous obtenions une confirmation. J'ai donc reçu la confirmation, et j'ai également reçu un message mineur. OK. Au moment où j'ai commencé à enregistrer cette vidéo, il y avait une nouvelle version mineure, disait que NPM était disponible, et elle me demandait si je pouvais effectuer une mise à niveau OK, donc je procéderai à la mise à niveau plus tard. Vous ne le verrez peut-être pas, d'accord, mais je vais juste l' ignorer pour le moment. Il s'agit simplement d'une notification de mise à niveau. Vous pouvez voir la confirmation ici, joyeux piratage. D'accord. Et si vous faites défiler la page vers le haut, vous verrez le processus complet de ce qui s'est passé. Nous avons donc exécuté cette commande ici. Oups Laissez-moi faire défiler la page vers le haut. Nous avons donc exécuté cette commande ici. OK, si vous venez ici, vous pouvez voir qu'il a ajouté tellement de packages. Cela a pris 36 secondes. Si vous venez ici, d'accord, cela signifie que cette application particulière a été créée avec succès à cet endroit et dans ce répertoire. Vous devez donc accéder à ce répertoire, et à l'intérieur de celui-ci, vous pouvez exécuter toutes ces commandes ici. OK ? Maintenant, une fois que vous avez navigué, il vous a donné des commandes prêtes à l'emploi comme NPN start, il démarrera sur le serveur de développement L'application React que vous avez créée est donc livrée avec un serveur inbllt intégré Vous pouvez exécuter cette commande pour regrouper l'application et dans des fichiers statiques, essentiellement pour le déploiement en production Cela lancera le lanceur de tests au cas où vous souhaiteriez exécuter des cas de test, NPM run eject OK, c'est quelque chose que tu peux gérer. Donc, la suggestion est que vous pouvez commencer par l'exécuter ici. Je vais le copier. OK ? Je vais le coller ici. Je vais me diriger vers ce répertoire, o, puis il vous indiquera NPM start Maintenant, il s'agit d'une commande à l'aide de laquelle vous pouvez démarrer un serveur de développement sur votre machine locale. Donc je peux aussi exécuter cette commande, d'accord ? Et vous pouviez voir l' application opérationnelle. C'est donc l' application, d'accord ? Vous pouvez voir que le navigateur s'ouvre automatiquement, et vous pouvez voir que c' est l'application qui fonctionne. Maintenant, il s'agit d'un serveur qui vous montre votre contenu ou s'il exécute votre application React dans le navigateur. Maintenant, chaque modification que vous apportez aux fichiers, vous verrez des rechargements en direct se produire ici. D'accord ? Maintenant, vous pouvez voir le message ici, comme si vous deviez modifier ce fichier en particulier et l'enregistrer pour le recharger OK ? Donc, cette interface provient de ce fichier en particulier, c'est ce qu'elle dit. Et si vous cliquez ici, voici le lien vers le site officiel de React. C'est ce à quoi il est lié. OK ? Vous pouvez donc aller sur ce site Web et consulter ou lire certaines informations également. C'est bon. Mais je voudrais mentionner quelques points ici : une fois que vous avez démarré le serveur de développement, vous pouvez l'arrêter en appuyant sur fois que vous avez démarré le serveur de développement, Ctrl et C sous Windows ou sur Command et C sur Mac. OK ? Je suis sous Windows, donc j'appuie sur Ctrl C, et vous pouvez voir que cela a mis fin à ce travail en particulier. Et voilà, si vous essayez de vous rafraîchir, cela ne marchera pas. D'accord, parce que le serveur est en panne, non ? Maintenant, pour que votre serveur soit opérationnel, vous devez exécuter NBM start dans ce dossier particulier OK ? Ce n'est qu'alors que votre serveur sera opérationnel. Ainsi, tout en développant, vous pouvez laisser le serveur allumé, modifier les fichiers, enregistrer et voir les modifications se produire en direct. OK ? Maintenant, je vais m'attarder un peu plus sur cette commande Nous avons donc créé l'application React ou l'application complète à l'aide de cette commande particulière. Maintenant, vous pouvez également ajouter des options ici à la fin. OK ? Donc, ce que vous pouvez faire, c'est utiliser des modèles ici. OK ? Maintenant, supposons que lorsque vous travaillez avec React, vous souhaitiez également utiliser du tapuscrit. OK ? Donc, si vous utilisez du tapuscript, vous pouvez ajouter quelque chose comme ceci Vous pouvez dire modèle ici, et vous pouvez dire type script. ne vais pas exécuter cela, mais ce n' est qu'une information supplémentaire. Cela permettra d'utiliser le modèle de dactylographie pour créer votre application et d'ajouter le support dactylographié dès le départ, ce qui est utile si vous travaillez sur un projet plus important qui peut bénéficier d'une bénéficier C'est bon. Vous pouvez donc utiliser cette commande de cette façon, d'accord. J'espère que cette commande est claire. NPX Create React Tap. Le serveur n'est donc pas ouvert, mais vous pouvez maintenant redémarrer le serveur en disant NPM run NPM start. Je suis désolée. C'est donc NPM start, quelque chose comme ça. Et si vous le démarrez, il redémarrera le serveur. C'est bon. J'espère donc que cela utile et j'espère que vous avez pu me suivre. 3. Préparer notre IDE - Visual Studio Code: C'est notre première application basée sur React, que nous avons créée, d'accord ? Ou je dois dire que nous n'avons pas créé. OK. Ce projet est donc généré automatiquement à l'aide de l'application Create React. OK, et cela nous donne également un indice ici. Vous pouvez modifier les points de l' application et enregistrer pour la recharger. OK ? Il contient un lien pour apprendre React, qui vous redirigera vers le site officiel de React. Très bien, jusqu'ici tout va bien. Voici donc notre application opérationnelle. Que devons-nous faire maintenant ? Nous devons commencer à coder et à modifier les choses. Et qu'allons-nous faire pour cela ? Nous allons installer un IDE qui est le code ID Visual Studio. OK. Voilà donc à quoi ça ressemble. Si vous l'avez déjà bien sur votre ordinateur, si ce n'est pas le cas, rendez-vous sur ce site officiel. Il s'agit d'un outil gratuit. C'est gratuit, basé sur l'open source, il fonctionne partout. Comme je suis sous Windows, cela m'invite à télécharger une version stable conçue pour Windows Vous pouvez passer au système d'exploitation dont vous avez besoin. Mais si votre système d'exploitation a un programme d'installation ici, il le fera automatiquement. Donc, si vous vous connectez depuis un Mac ici, cela vous indiquera le téléchargement depuis Mac. OK ? Donc, quelle que soit la plateforme à partir de laquelle vous l' ouvrez ce bouton s'affichera et vous pourrez le parcourir si vous ne savez pas ce qu'est le code de Visual Studio. Mais il suffit de le télécharger et l'installer comme n'importe quel autre logiciel. Je l'ai déjà installé, je ne vais donc pas vous montrer les étapes d'installation, mais les étapes d'installation ne sont pas du tout complexes. C'est très simple et direct. 4. Premières étapes: Maintenant, une fois que vous avez correctement installé le code Visual Studio, vous verrez une page comme celle-ci. Donc, si vous ouvrez le code Visual Studio, pour la première fois, vous verrez cette page de bienvenue. Maintenant, je suis un utilisateur de Visual Studio Code depuis un moment, d'accord ? Et vous voyez tous ces projets récents. Il est donc probable que vous ne verrez pas cette liste de projets récents tant que vous ne serez pas un utilisateur. D'accord ? Mais comme je l'ai dit, comme je l'ai dit, je vois la liste des projets récents que j' ai utilisés ou créés dans le passé. Vous verrez également ces options ici : nouveau fichier, fichier ouvert, dossier ouvert, clonage du dépôt Git, connexion à tout cela. C'est un outil très utile. Le code Visual Studio, je l'utilise tout le temps. Maintenant, pour ouvrir le projet, vous connaissez le dossier dans lequel vous avez créé le projet. Vous pouvez donc simplement cliquer ici, Ouvrir le dossier et vous pouvez accéder à l'emplacement du dossier dans lequel vous avez créé le projet. Sinon, si pour une raison quelconque vous ne le voyez pas, vous pouvez accéder au fichier à partir des options du menu ici et vous pouvez voir le dossier ouvert. Les deux sont identiques. Je vais donc sélectionner OpenFolder, accéder au répertoire de mon choix et ouvrir le projet ici Maintenant, lorsque j'ai sélectionné Ouvrir le dossier, j'ai vu cette fenêtre de dossier, qui est Explorer, la parcourir jusqu' au dossier dans lequel j'ai créé l'application React Et je vais sélectionner ce dossier en particulier. Il s'agit de mon projet d'application React que nous avons créé. À l'intérieur, vous verrez quelques fichiers, mais vous devez sélectionner le dossier racine. Je vais dire sélectionner, et cela ouvrira ce dossier en particulier pour moi. Maintenant, je peux fermer cette page d'accueil ici, d'accord ? Vous pouvez donc voir le projet ici sur le côté gauche, d'accord ? Vous pouvez consulter l'intégralité de ce dossier. Si vous le dépliez, vous verrez les fichiers qu'il contient. D'accord ? Ainsi, lorsque vous avez exécuté la commande appelée Create React app, d'accord avec l'application Create React, elle a créé tout cela pour vous. Vous pouvez également le créer manuellement. Mais comme vous pouvez l'imaginer, cela va être très fastidieux, non ? Ainsi, cet outil particulier, l'application Create React, fait le travail à votre place, en configurant la structure complète du projet pour vous. D'accord ? Nous passerons bientôt en revue cette structure de projet , mais pour le moment, je voudrais également expliquer que le serveur est opérationnel depuis le terminal. Maintenant, ce que je peux faire, c'est que je n'ai pas besoin d'utiliser un terminal externe. Le code Visual Studio permet d' avoir un terminal dans le code Visual Studio. De cette façon, je n'ai jamais à quitter code de Visual Studio pour passer à un terminal local. Ici, en haut des options, je vais voir le terminal ici. Vous pouvez dire nouveau terminal, et vous pouvez voir qu'il s'agit d'un terminal intégré dans le code de Visual Studio. Et si vous dites PWD, qui est le répertoire de travail actuel, le terminal s'ouvre automatiquement dans le dossier que vous avez ouvert dans le code Visual Studio, qui est le dossier du projet Vous n'avez donc pas besoin de naviguer également, vous n'avez pas besoin d'exécuter la commande, CD, etc. et de naviguer, cela fonctionne simplement comme un terminal local. Donc ici, je peux dire que NPM recommence ici. Au moment où je dis, je vais avoir une erreur, vous pouvez voir que quelque chose fonctionne déjà sur le port 3 000. Et ce qui est en cours d'exécution, c'est notre application elle-même qui s'exécute, et elle nous demande si vous souhaitez plutôt exécuter l'application sur un autre port. Je ne veux pas faire ça. Je vais dire non. OK, et ça va juste arrêter l'exécution. D'accord ? Mais ce que je vais faire, c'est fermer ce serveur parce que je ne veux plus utiliser un terminal externe, vous savez, ici. D'accord ? Je veux m'en tenir au terminal fourni par Visual Studio, et je vais commencer par NPN, et celui-ci devrait maintenant exécuter le serveur de développement pour vous D'accord ? Donc, de cette façon, nous pouvons le déplacer vers une nouvelle fenêtre. Nous voici donc dans la nouvelle fenêtre, et j'ai du code Visual Studio en cours d'exécution dans la nouvelle fenêtre. Ainsi, je n'ai jamais à quitter le code de Visual Studio. Je peux même minimiser ça ici comme ça. D'accord ? Je peux même créer un nouveau terminal à partir d'ici, pour que vous puissiez voir plus, et vous pouvez avoir plusieurs terminaux fonctionnant ici. D'accord ? C'est très utile, et c'est la raison pour laquelle. Ce type d'outils fournis par Visual Studio code est donc la raison pour laquelle il est si apprécié par la communauté des développeurs. Maintenant, je vais également vous montrer la liste des extensions que j'ai. Donc, si vous allez dans cet onglet d'extension sur le côté gauche, vous avez ici quelques options comme la recherche, le contrôle du code source, l'exécution et le désaboiement de tout cela, d'accord ? J'utilise également Docker dans certains de mes projets, vous pouvez donc également voir Docker ici Mais il se peut que vous ne le voyiez pas. D'accord ? Cela nécessite une extension séparée. D'accord ? Mais si vous optez pour l'extension, que sont les extensions maintenant ? Les extensions vous permettent donc d'améliorer ou d'étendre les fonctionnalités par défaut que le code Visual Studio fournit déjà. Vous pouvez donc voir que j'ai une extension pour le bloc-notes Jupiter. D'accord. Chaque fois que je code en Python, et si je veux un support pour les blocs-notes, j'utilise cette extension. D'accord. J'ai donc cette extension. Cela n'est pas nécessaire pour réagir. J'ai l'extension Python. D'accord ? Maintenant, cette balise de renommage automatique peut être utile pour React car, vous savez, si vous renommez une balise, d' accord, et s'il y a une balise de fermeture, cela aura pour effet de renommer payante la version payante de cette OK, donc c'est quelque chose que tu peux avoir. C'est utile. Par exemple, si je dois vous donner un exemple, laissez-moi vous en donner un. Disons donc si je crée ou si je me laisse ouvrir un fichier ici. OK, laissez-moi ouvrir un fichier HTML. Maintenant, ce truc, vous pouvez le voir, laissez-moi y aller , faites défiler la page vers le bas. Ce titre possède donc une balise d'ouverture et une balise de fermeture. Donc, à cause de cette extension particulière, si je renomme la balise d'ouverture, vous pouvez voir que la balise de fermeture est également renommée D'accord ? C'est donc l'avantage de cette balise renommée automatiquement. Vous n'êtes pas obligé de renommer abord la balise d'ouverture, puis renommer la balise de fermeture, Il s'agit de la colorisation par paire, comme vous pouvez le constater à partir de l'icône elle-même, elle est utilisée pour que la couleur mette en évidence la paire qui ferme le crochet C'est utile si vous utilisez de nombreux crochets dans Okay, Debugger pour Java, Debugger pour Java, Dev Containers, jango Doco, tout cela est utilisé pour d'autres langages, le pack d' extension pour Java, Gradle pour Java et Italicde. D'accord ? C'est pour le développement assisté par l'IA. C'est également pour cela qu'il s'agit d'exemples d'utilisation de l'API Intelicode. D'accord. J'en ai pour Python. Ce sont donc tous liés à Python, je vais faire défiler la page vers le bas, un serveur live. Nous n'avons pas besoin de ce Maven pour Java. Cela n' est pas non plus nécessaire. Prettier est quelque chose que vous pouvez utiliser. Cela formate le code. Il organise le code pour vous. D'accord. Et oui, c' est ce que nous avons, OK. Je vais également ajouter quelques extensions dès maintenant ici. D'accord ? Donc, ce que vous pouvez faire, c'est rechercher des extraits de code React ici, quelque chose comme ça D'accord. OK, vous pouvez donc rechercher ES Seven plus React, quelque chose comme ça. Et vous verrez cette extension avec près de millions d'installations. Cela fait donc 12,9 millions au moment où j'enregistre cette vidéo. Bien entendu, cela continuera d'augmenter et vous verrez peut-être un chiffre différent lorsque vous regarderez ce film. Il s'agit donc d'une extension. C'est le nom ES seven plus react redux react native snippets Maintenant, cela vous donne des modèles, d'accord ? Par exemple, si vous voulez créer une fonction, vous pouvez dire RAFC Vous pouvez simplement le saisir et cela vous donnera la définition complète de la fonction. D'accord. Il possède donc ce genre de raccourcis, ce qui vous permet de gagner du temps. Vous pouvez donc l'installer . Je vais simplement cliquer sur Installer et ajouter à ma liste d'extensions. D'accord ? Donc oui, nous l'avons installé maintenant, d'accord ? Vous pouvez explorer d'autres plugins ou extensions React sur le marché ici et vous pouvez jouer avec. Vous pouvez également améliorer les fonctionnalités par défaut que le code Visual Studio vous fournit déjà. C'est bon. Donc oui, il s'agit de configurer le code Visual Studio, et j'espère que vous l'avez trouvé utile. 5. Intégrer de manière transparente les API dans React: Il est donc temps que nous commencions à discuter de la manière dont vous pouvez travailler avec les EPI dans votre application React Maintenant, les API, comme vous le savez, EPI sont l'abréviation d'interface de programmation d'applications, et c'est un moyen pour un serveur distant ou un back-end d'exposer l'ensemble des fonctionnalités au client OK ? Et il se peut que vous ayez une application React dans le front-end qui souhaite utiliser les services souhaite utiliser les services exposés par le serveur principal Hein ? Et aujourd'hui, si vous créez une application quelconque, l' utilisation des EPI est vraiment très courante, d'accord ? Je ne peux pas imaginer une application de production ne consommant pas d'EPI D'accord, les API sont très courantes de nos jours. Et si vous souhaitez devenir un développeur sérieux, il est important que vous compreniez comment utiliser correctement les EPI dans votre application React C'est donc ce que nous allons aborder en un clin d'œil, d'accord ? Donc, ce que nous allons faire, c'est que j'ai déjà cette application React, que j'ai créée à l'aide de VT, et j'ai fichier d' application GSX dans lequel je vais écrire tout mon code C'est un fichier de composant, qui est rendu dans Minix ici Vous pouvez voir qu'il est rendu ici. D'accord ? Maintenant, pour travailler avec des API, vous avez besoin d'un ensemble d'ABI, d'accord ? Et heureusement, nous avons un ensemble de fausses API gratuites ici. D'accord, cela peut être utilisé pour les tests et le prototypage. Je vais donc utiliser ce site Web appelé snplaceholder.typod.com. C'est bon. Et pour vous y rendre, vous pouvez saisir directement l'URL dans le navigateur ou rechercher GCN Placeholder sur Google et vous verrez cet espace réservé cn C'est bon. Donc, en venant sur ce site Web, vous verrez qu'il fournit un EPS gratuit, faux et fiable pour les tests, d'accord ? Il répertorie les sponsors ici. OK, et cela vous donne un aperçu de la façon dont vous pouvez l'utiliser ici OK ? Vous pouvez donc voir ici. Il s'agit du point de terminaison qu'il fournit. OK ? Oui, c'est un point final à deux, et tu peux le déclencher ici. Vous verrez le S et la réponse. OK ? Vous pouvez le voir ici. Vous avez donc l'ID utilisateur, l'ID, le titre et le formulaire complété ici qui sont affichés. OK ? Et vous pouvez accéder à l'API. OK. Laissez-moi vous plaire, vous pouvez accéder à l' API de cette façon en utilisant la méthode fetch en JavaScript Maintenant, je récupère du JavaScript, ce n'est pas un concept de réaction, mais c'est du contenu lié à JavaScript, désolé, un concept JavaScript Et comme React est basé sur JavaScript, vous pouvez utiliser fetch dans votre code Si vous exécutez ce script, ce qu'il fait, c'est que fetch renvoie essentiellement une promesse, puis nous l'utilisons puis celle-ci est échelonnée ici Alors attends que ça se termine. Ensuite, vous obtenez la réponse ici et celle-ci est exécutée. Donc, ce qui se passe , c'est que la réponse est prise en compte ici et convertie en JSN puis une fois ce processus terminé, le JCN est verrouillé sur la console OK ? Si vous exécutez ce script, vous verrez que ce sont les résultats que vous obtenez, n'est-ce pas ? Il est construit par navigateur. Cela vous permet de courir jusqu'ici. Et il fournit de nombreux points de terminaison. OK, vous pouvez voir Slash Post. Je vais vous fournir 100 articles , afin que vous puissiez vous rendre ici. Vous pouvez voir les 100 publications qu'il vous propose. Donc, si vous voulez beaucoup de données, vous pouvez interroger ces commentaires, albums, photos, cela vous fournira 5 000 photos, todos, utilisateurs et tout OK ? Donc oui, vous pouvez utiliser ces API. Il y a des tonnes de choses. Si vous souhaitez faire une demande, ce sont dix points. Si vous souhaitez faire une demande de publication, il y a quelques points de terminaison ici Demandes de correctif, demande de suppression également. Maintenant, si vous connaissez les EPI et leur fonctionnement, vous savez que les EPI sont de différents types, tels que get, post, put, patch, delete, n'est-ce pas EPI sont de différents types, tels que get, post, put, patch, delete, n' post, put, patch, delete, Donc, oui, il s'agit de ce support de type JCN. Désolé, JCNPlaceHolder. C'est bon. Ce que vous pouvez faire, c'est que nous allons nous en servir ici. OK ? Pour en venir à notre application ici, j'ai une configuration de composant très simple. OK ? Il renvoie simplement un simple Jex, qui n'a que l'en-tête OK ? Donc, ce que nous allons faire, c'est obtenir ces données. OK, donc je vais juste le copier ici. OK, tout de suite. Et je vais tout de suite l'intégrer ici dans mon composant, mais je ne vais pas le coller OK. Je vais utiliser le hook Use Effect ici. Parce qu'il y a un effet secondaire, non ? Et comment utiliser l'effet d'usage ? Alors, oups, il suffit d'apparaître. D'accord, alors comment utiliser l'effet d'utilisation ? J'ai une fonction, tout d' abord, o. Et ici, c'est une fonction qui sera appelée avec la logique. OK. Et puis j'ai une virgule avec la dépendance Donc, quelle que soit la dépendance que je veux ajouter, je peux l'ajouter ici. OK. C'est fait. OK. Il s'agit d'une fonction de flèche, elle doit donc comporter une flèche. C'est bon. C'est une syntaxe que je vais utiliser, d'accord ? Maintenant, je veux effectuer cette opération. L'opération va donc résider dans ces bretelles bouclées, donc je vais terminer ici, et je vais coller le code de récupération OK ? Je vais te permettre de terminer ça par un point-virgule si tu veux, OK, je vais juste faire un zoom arrière pour que ce soit visible sur un seul écran ici. OK ? Maintenant, une chose à noter ici, je transmets une zone de dépendance vide ici parce que je veux ce hook d'effet d'utilisation ou ce code s'exécute lors du premier montage ou sur la quantité du composant, lors du premier rendu et pas après cela. En ce qui concerne l'effet des règles d'utilisation, si vous souhaitez qu'une logique particulière s'exécute sur le montage du composant, vous devez transmettre un tableau de dépendances vide ici. OK ? Maintenant, bien sûr , cela permet de récupérer ceci Il effectue un appel de récupération vers ce point de terminaison particulier. Il obtient la réponse et convertit en JCN ici, puis il verrouille le JCN sur la console en utilisant ce truc OK ? Donc, tout de suite, ce que je vais faire, c'est ouvrir la console ici. OK. Et je vais vous avertir ici que ce truc va être imprimé deux fois sur la console. Pourquoi ? Parce que nous courons en mode strict ici. OK, Mint ch sex. Vous pouvez voir le mode strict. Si vous ne voulez voir la sortie qu'une seule fois sur le monticule de composants, vous devez supprimer le mode strict à partir de là C'est bon. Je vais donc enregistrer ça. Au moment de l'enregistrement, vous verrez cette sortie s'afficher sur la console. C'est bon. Tu peux voir. Et vous pouvez développer, comme vous le verrez, utiliser ID. Euh, le titre d'identification ici et les chutes terminées. C'est bon. Cela fonctionne donc parfaitement bien, et c'est ainsi que vous pouvez récupérer les données et les afficher sur la console. D'accord ? Maintenant, bien sûr, l'objectif n' est pas d'afficher les données sur la console, mais le but ici est de voir comment vous pouvez utiliser Fetch pour effectuer des appels PA OK, nous avons maintenant les données dans notre application React, mais nous les connectons simplement à notre console. Maintenant, à partir de cette partie du code, nous pouvons emporter ces données n'importe où, n'est-ce pas ? Nous pouvons emporter ces données n'importe où, ce qui signifie que si je le souhaite, je peux également les mettre à jour ou les mettre dans un état. OK ? Et c'est ce que nous allons faire. OK ? Donc ce que je vais faire, c'est créer un État ici. Je dirais des données. Je vais avoir défini les données ici, quelque chose comme ça, je vais dire utiliser l'état ici et j' aurai un MTRA comme initialisation ici. J'ai donc cet état de données. Maintenant, ce que je peux faire, c'est que j'ai ce JCN ici, à droite, en entrée Donc, au lieu de le connecter à la console, je dirais qu' au lieu du journal de la console JCN, je dirais définir les données, et je transmettrai ce JCN ici Comme ça. OK ? Et c'est chose faite. OK ? Maintenant, si je l'enregistre, les données ne sont pas connectées à la console, si je les actualise. Les données ne sont pas verrouillées sur la console, mais elles sont désormais mises à jour dans leur état actuel. D'accord ? Il est maintenant mis à jour. Mais nous n'utilisons pas l'État ni ne l' affichons nulle part, n'est-ce pas ? Donc, ce que vous pouvez faire, c'est également afficher les données de récupération, n'est-ce pas Donc, ce que je vais faire, c'est venir ici, et nous faire une liste non ordonnée Donc, puisque nous recevons une liste de valeurs ici. Donc, si vous voyez les données, si je passe un appel ici, ou si nous avons les données ici, est-ce pas ? Voilà ce que sont les données. C'est ainsi qu'il nous est envoyé. Nous pouvons donc afficher l'ID utilisateur, ID, le titre et le compléter. Donc, ce que je vais faire, c'est avoir une liste non ordonnée ici. Je vais utiliser un script jar. OK, je dirais une carte à points de données. Maintenant que nous utilisons un tableau, d' accord, je dirais une carte à points de données. Maintenant, ici sur la carte, ce que nous ferions, c'est de le faire ici, parce que c'est ce que nous cherchons. OK, nous allons chercher les choses à faire. OK. Et donc, pour le moment, nous n'avons qu'un seul objet. OK ? Ce que nous allons faire, c'est le mettre à jour ultérieurement pour obtenir également une liste d'objets. OK, alors ne t'inquiète pas pour ça. OK. En fait, je dirais qu'ici, puisque nous n'avons qu'un seul objet, nous n'avons même pas besoin de carte. OK ? Donc, ce que nous pouvons faire, c'est me laisser le supprimer. OK ? Je dirais que nous n'avons même pas besoin de carte. Je voudrais juste l'afficher de cette façon. OK ? Je dirais donc que les données sont tendues, et quelle en est la propriété ? La propriété, c'est un titre, non ? Nous avons un titre de propriété, donc je vais dire titre, quelque chose comme ça. OK. Oups, ce sera donc dans la paire de bretelles bouclées Vous pouvez voir que c'est le titre que nous donne l'API. Tu peux voir. OK, ce sont les données que nous recevons, n'est-ce pas ? Vous pouvez également afficher l'identifiant, l' identifiant utilisateur complété. OK ? Vous pouvez donc afficher l'identifiant ici. OK. Je peux également afficher le nom d'utilisateur, quelque chose comme ça. OK. ID utilisateur. OK. Vous pouvez voir que l'ID est un, l'ID utilisateur en est un. OK. Et vous pouvez également avoir une sorte de texte ici, nom d'utilisateur. D'accord, donc, d'accord, non, c'est une pièce d'identité. Il s'agit donc de faire de l'identification en bref. Pour faire une identification. OK. Et voici le nom d'utilisateur. Je vais donc avoir un nom d'utilisateur, quelque chose comme ça. Et c'est pour faire le titre D'accord, quelque chose comme ça, et vous pouvez voir les données, n'est-ce pas ? Qu'elle soit terminée ou non, vous pouvez également l' avoir ici. OK ? Tellement terminé ou pas que vous pouvez également l'afficher. OK, cela dépend entièrement de vous, mais nous n'avons pas besoin de carte car nous n' avons pas de liste ici. OK ? C'est donc pour un seul ensemble d'articles ici. Disons demain demain. Alors voilà, je vais faire défiler la page vers le bas. Ici, nous obtenons la liste des todos. Vous pouvez voir, nous allons obtenir la liste des choses à faire. Donc, cette même logique, vous pouvez la convertir en une opération ici, n'est-ce pas ? Tu peux le faire, d'accord ? Ou changeons cela pour publier également. Vous pouvez le modifier pour publier si vous le souhaitez. OK ? Donc, ce que je vais faire, c'est prendre le point final. Publier. OK ? Je vais l' ajouter ici. OK. Et je vais remplacer ce point de terminaison par celui-ci, quelque chose comme ça. Je vais le supprimer. OK. C' est assez simple. Et maintenant, ce que je vais faire, c'est avoir une carte des points de données parce que nous avons maintenant la liste des informations, n'est-ce pas ? Je vais donc avoir cette carte. OK ? Donc tout d'abord, avant d'ajouter une carte, je vais avoir une liste non ordonnée Alors je parlerai de carte de données ici. OK. Et ici, je vais dire post. Pour chaque post, d'accord, je dois faire quelque chose. OK ? Qu'est-ce que je vais faire ? C'est ce que je vais définir ici, d'accord ? Pour chaque article, j'en aurai une liste ici, d'accord ? Et la liste aura une clé. OK ? Maintenant, quelle sera la clé ? Quelle doit être la valeur de la clé ? Ce devrait donc être une pièce d'identité. J'aurai un identifiant unique pour la clé. OK ? Je peux donc dire «   post point ID » ici. OK. Ensuite, après LI, j'aurai une balise P ou une balise H deux selon la façon dont vous souhaitez l'afficher. Je dirais le titre du post point, quelque chose comme ça. OK. Et puis, euh, laisse-moi voir, le titre est un et le corps en est un. Je vais dire le titre, puis P, et puis vous avez, euh, le corps du message. Vous pouvez donc dire postt body, quelque chose comme ça. OK ? C'est fait. OK, maintenant tu as l'erreur. Donc, si vous voyez l'erreur, je pense que je sais quelle est l'erreur. C'est probablement dû au fait ou vous pouvez voir que la carte des points de données n'est pas une fonction. OK ? Compris. Nous le définissons donc ici sous forme de tableau. OK ? Nous allons donc le supprimer et je vais le mettre sur null ici. OK. Et voyons si l'erreur disparaît. OK, l'erreur ne disparaîtra pas. OK, donc j'ai découvert un problème. Le problème était de le définir sur null. OK ? Donc, le fait de le définir sur un tableau vide était en fait correct. OK ? Je ne sais pas pourquoi j'ai reçu l'erreur lors d'une actualisation matérielle, l'erreur a disparu. OK ? Le code est donc correct. J'avais ce tableau vide correctement placé au départ, d'accord, parce que nous voulons l'avoir sous forme tableau parce que nous utilisons la carte ici, n'est-ce pas ? Et la carte est une méthode pour les tableaux uniquement, accord ? Cela fonctionne avec des tableaux. Maintenant, si vous voyez, après une actualisation complète, et si je vois ici, vous pouvez voir le corps et le titre de l'article, vous pouvez voir comment cela s'est affiché ici. OK. Si vous le souhaitez, vous pouvez afficher le corps du message à l'aide de l'étiquette en forme de bol. Tu peux avoir B ici. OK ? Ou tu peux être fort, en fait, d'accord ? Je dirais donc fort. OK. Et je vais juste ajouter le titre inclus dans le fort et vous pouvez voir le titre et la pose ici. OK. Nous sommes donc en train d' aller chercher 200 poses D'accord, parce que c'est ce que dit cette API , d' accord, si vous voyez ici, elle donne, désolé, 100 poses, pas 200 publications. Il donne 100 poses et nous affichons 100 poses ici. OK ? En utilisant le fetch fetch de JavaScript. OK ? Donc, la façon dont cela fonctionne est que, dans un premier temps, ce bloc de code d'effet d'utilisation est exécuté lors du montage du premier composant. Pourquoi s'exécute-t-il lors du montage du premier composant ? À cause de ce tableau de dépendances ? Selon les règles, si le tableau de dépendances est vide, d'accord, le bloc de code que vous avez ici sera exécuté une fois sur le montage du composant. Maintenant, pour ce qui se passe dans le montage du composant, vous utilisez fetch Vous appelez ce point de terminaison ici, et vous avez un set. On vous fait une promesse, puis vous vous en servez ici pour obtenir la réponse de Jason, puis vous vous servez de la réponse pour définir des données. OK ? Que sont les données définies ? Les données d'ensemble sont des données d'ensemble qui utilisent des données, vous pouvez définir les données ici, ce qui n'est rien d'autre que l'état ici. Il s'agit donc d'un ensemble de fonctions. OK ? Ensuite, vous avez des données contenant ces données que vous recevez du serveur. Que faites-vous maintenant ? Vous pouvez utiliser la carte ici pour afficher les données de cette façon. OK, nous sommes donc en train de l' itérer et nous l' affichons Si nous ne recevons qu' un seul article ici, si vous ne recevez qu'un seul article et non la liste des articles, alors vous n'avez pas besoin de carte car vous n'avez pas besoin d' itérer sur les données, n'est-ce J'espère que c'est logique, d'accord ? C'est donc là que tous les concepts de Javascript React se rejoignent. OK, alors combien de concepts utilisons-nous ? Nous utilisons les crochets à effet d'utilisation, nous utilisons le concept de crochets. Vous utilisez les États ici. Vous utilisez fetch from JavaScript. Vous faites usage de vos promesses ici. Et puis ici, vous utilisez la fonction cartographique avec des la fonction cartographique avec tableaux, et vous affichez les données Tu utilises également son sexe. D'accord ? Vous pouvez donc voir comment cela génère le rendu des données à partir d'un serveur distant. J'espère que vous avez pu me suivre, et j'espère que cela vous a été utile. 6. Gérer efficacement les états de chargement et le traitement des erreurs: Salut, voilà. Nous parlons donc de la façon dont vous pouvez travailler avec les API dans React ? faisant , Ce faisant , nous avons créé un composant très simple qui appelle cette API pour obtenir la liste des publications, et nous affichons les données ici dans le composant. OK ? Et c'est le résultat que nous avons obtenu jusqu'à présent. Et si vous souhaitez le voir en plein écran, voici notre EPI, et voici le résultat actuel, d'accord ? Vous voyez tous les posts. OK. Ne t'inquiète pas. Ceci est ce message ou dans une autre langue. OK ? Laissez-moi peut-être traduire. Si je traduis ceci, il est dit que c'est en latin. OK. Tout à fait d'accord. Nous voulons juste utiliser des données factices, n'est-ce pas ? Peu importe la langue. OK. Donc oui, c'est un post. Maintenant, nous affichons les données. Maintenant, ce qui peut arriver, c'est que chaque fois que vous travaillez avec des EPI, vous passez un appel à un serveur distant, d'accord ? Vous passez un appel à distance vers quelque chose, n'est-ce pas ? Et il y aura un scénario dans lequel les données que vous obtenez prennent un peu de temps. C'est donc une bonne pratique de gérer ou d' avoir une interface dans laquelle vous dites l'utilisateur que les données sont extraites, et cet état, nous pouvons l'appeler état de chargement, n'est-ce pas ? Alors, comment géreriez-vous l'état de chargement lorsque vous faites ou lorsque vous récupérez des données depuis un serveur distant De plus, il s'agissait du premier scénario dans lequel vous voudriez gérer un état de chargement. Le deuxième scénario est que vous pourriez vouloir gérer toutes sortes de situations d'erreur, d'accord ? Maintenant, l'erreur peut être comme une faute de frappe dans l'URL ou comme si les données étaient récupérées, mais lorsque vous les convertissez en JSN, vous obtenez une erreur là-bas, d'accord, parce que les données reçues ne sont pas au Comment géreriez-vous et géreriez-vous les erreurs dans ce cas ? OK, c'est quelque chose dont nous allons parler. Nous parlons donc de deux choses la gestion de l'état de chargement et la gestion des erreurs lorsque vous travaillez avec des API, d'accord ? Parlons d'abord de l'état de chargement. OK ? Donc, pour l'état de chargement, nous pouvons en fait avoir une interface utilisateur personnalisée, ou un G six différent que nous renvoyons si l'état est en cours de chargement. OK ? Donc, ce que je vais faire, c'est abord avoir un État ici. Je dirais chargement. OK, et je dirais que c'est le set loading ici. OK, et je dirais use state, quelque chose comme ça. OK. Et je vais prendre ça. OK. Vous pouvez donc dire que c'est un booléen C'est un état booléen ici, d'accord ? L'État contient des données booléennes. Donc vrai signifie qu'il charge des données actuellement, et faux signifie qu'il ne se charge pas actuellement. OK ? Je vais donc initialiser à false, disons ici OK. Maintenant, ce que nous ferions, c'est que si l'état est vrai, nous pouvons ne pas vouloir afficher cette interface. OK ? Parce que si les données sont chargées, ce qu'il y a dans cette interface, ce sont les données de publication que nous recevons du serveur. Si les données ne sont pas encore extraites et si elles sont en cours de chargement, nous ne devons pas les afficher Au lieu de cela, nous avons besoin d'une interface utilisateur différente, dans laquelle nous devons indiquer à l'utilisateur que les données sont en cours de chargement. OK ? Donc, ce que vous pouvez faire, c'est avoir cette déclaration ici. Vous pouvez dire si, et je dirai si c'est en cours de chargement. OK, donc si le chargement est vrai, je reviens. Vous pouvez donc avoir plusieurs relevés de retour ici. OK. Vous renvoyez donc du JSX, mais si le chargement est vrai, vous renvoyez un J six différent ici et que retournons-nous ? Nous allons renvoyer un simple tag P ici. OK, donc je vais juste ajouter une balise P, et je dirais chargement, quelque chose comme ça. C'est très simple. OK, c'est juste un texto. Je n'insiste pas sur la création d'une interface complexe, mais vous pouvez également définir une chose complexe ici. C'est ce que cela signifie. OK ? Maintenant, ici, cela n'est pas rendu parce que l' État est faux, n'est-ce pas ? Donc, dès que je change l'état en vrai, si je l'enregistre, vous verrez le chargement s'afficher. Hein ? Le chargement signifie que le chargement est toujours en cours et que les données ne sont pas encore extraites OK ? C'est donc ce que l'utilisateur verra lorsque les données seront récupérées, n'est-ce pas ? Et nous changeons manuellement ce qui est vrai en faux et faux en vrai, n'est-ce pas ? Et nous sommes en train de voir si cela fonctionne bien. OK ? Cela ne génère donc aucune sorte d'erreur, c' est parfaitement valide. Vous pouvez avoir plusieurs relevés de retour, mais ils doivent être conditionnels. Comme si c'était conditionnel, non ? Vous ne pouvez pas avoir juste un relevé de retour ici. OK, c'est en fait une fonction après tout, non ? Cela devient inaccessible parce que vous revenez ici , n'est-ce pas ? Cela n'a donc aucun sens car ce sont des fonctions de script Ja ici, rien d'autre, n'est-ce pas ? Vous pouvez donc avoir ce type de retour. Vous pouvez dire s'il est en cours de chargement, puis le retourner, d'accord ? Maintenant, ce que je dois faire, c'est que lorsque les données sont récupérées, je dois définir la valeur de chargement et l'état de chargement ici OK ? Donc, ce que je vais faire, c'est ici, un premier temps, je vais dire que l' État est faux, d'accord. Et dans le cadre de cet effet d'utilisation, ici. Donc, quand les données sont récupérées, d'accord ? Je dirais le chargement du set. OK ? Donc, lorsque nous définissons les données ici. Donc, au départ, lorsque le chargement commence dans le cadre de cet effet d'utilisation, je peux dire définir le chargement sur true. Quelque chose comme ça. OK. Et puis une fois les données récupérées ici. Donc, lorsque les données d'ensemble sont appelées ici, lorsque le chargement est terminé, alors nous pouvons avoir, nous pouvons les ajouter à Cibras parce que maintenant nous ajoutons plus d'une instruction et ici je peux dire que le chargement des ensembles est désactivé, je peux dire définir le chargement sur celui peux dire que le chargement désactivé, je peux dire définir le chargement des chutes parce que le chargement est terminé, n'est-ce pas ? OK. Voici donc comment vous pouvez gérer le chargement. Maintenant, si vous enregistrez ceci, si vous actualisez, vous verrez le chargement s'afficher lorsque l'appel EPA aura lieu. Tu peux voir, tu peux voir. Cela arrive à peine une seconde car l'EPA est rapide, bien sûr. OK. Mais si l'API prend un peu de temps, sera bien sûr là pendant un certain temps. Alors, que faisons-nous ? Nous gérons l'état de chargement à l'aide d'un état ici, d'accord ? Nous affichons le chargement à l'aide d'un état. Nous avons défini l'état de chargement avec la valeur par défaut de falls, puis nous avons cette interface utilisateur qui, si le chargement est vrai, renvoie ce JSX, d'accord ? Vous pouvez le modifier comme bon vous semble. Vous pouvez définir un CSS personnalisé à cet effet. C'est totalement ton choix. Mais comment cela est-il affiché et masqué ? Tout d'abord, dans le hook use effect, la première chose que nous faisons est de régler le chargement sur true. Ensuite, nous réglons le chargement en fonction des chutes. Maintenant, si vous manquez une fois que les données ont été récupérées et qu'elles sont mises à jour dans leur état actuel, nous réglons le chargement sur fols afin que les données soient affichées Si vous manquez cette étape pour une raison ou une autre, vous réglez le chargement sur des plis, il sera simplement bloqué lors du chargement, c'est vrai. Même si les données sont placées ici dans l'état d' ici, d'accord ? Vous n'êtes pas en train de mettre à jour l'état lequel vous étiez vrai au départ. Je dois le mettre à jour. Et dès que je mettrai à jour, vous verrez les données être récupérées Et cela vous donne une bonne indication à l'utilisateur qu'une donnée est en cours chargement, si l'EPI prend du temps Voici donc comment vous pouvez gérer l'état de chargement lorsque vous travaillez avec des appels d'API. OK ? Vient maintenant la deuxième partie, qui est la gestion des erreurs. OK ? Maintenant, en ce qui concerne la gestion des erreurs, il est évident que si vous travaillez avec des EPI, des erreurs peuvent survenir, n'est-ce pas ? Donc, ce que je vais faire, c'est avoir un autre État ici. Je vais dire const, je dirai error, et je dirai set error, et je dirai use State à celui de null. OK. Donc, au départ, l'erreur est nulle. C'est un État que je suis en train de créer ici. OK ? Comme je l'ai indiqué pour le chargement des données et les erreurs. C'est bon. Et ce que je vais faire, c'est là, j'ai ceci alors, c'est le DN qui est exécuté une fois que les données sont reçues sous la forme JSN OK, ce que je peux faire, c'est ajouter une étape de plus ici. Je peux dire attraper. OK. Vous pouvez dire intercepter ici, et je peux dire erreur, détecter l'erreur, et vous pouvez réellement gérer l'erreur ici. OK ? Je peux donc dire «   point console ». Connectez-vous d'abord ici. Je peux enregistrer l'erreur. Je peux dire, euh, d'accord. Permettez-moi d'utiliser les modèles. OK, donc je vais dire erreur lors de la récupération des données. OK. Et je peux juste avoir les informations d'erreur ici. Être transmis. OK, c'est fait. OK, j'ai raté le point-virgule, donc je vais ajouter un OK. Je vais juste faire un petit zoom arrière. Cela est donc visible dans la vue unique. J'ai donc cette erreur de point de console. Ensuite, je peux dire erreur de réglage. OK, définissez l'erreur, et je peux mettre à jour l'erreur ici. Je peux mettre à jour les informations d'erreur dans le champ pour récupérer les données C'est donc le message que vous souhaitez présenter à l'utilisateur. C'est moi qui règle ça, d'accord ? Et je dis qu'il faut aligner le chargement sur celui des chutes, d'accord ? Vous devez également mettre à jour le chargement pour qu'il tombe ici, car vous avez initialement défini le chargement sur true. Juste au moment de l'effet d'utilisation. OK ? Donc, une fois les données chargées, vous les réglez sur Falls, et une fois qu' il y a une quelconque erreur, vous réglez le chargement sur Falls parce que le chargement est terminé, n'est-ce pas ? Vous devez donc mettre à jour l'état. OK ? Et nous devons afficher l'erreur à l'utilisateur. Si vous le souhaitez, vous pouvez afficher. Donc, ce que je vais faire, c'est ajouter quelque chose comme ça. Je peux dire s'il y a une erreur ici. Je vais afficher le message d'erreur. Je vais simplement afficher le message d'erreur. Je peux dire qu'il s'agit d'une erreur, comme ça. OK ? Maintenant, si vous actualisez, vous n'aurez aucune sorte d' erreur ici, d'accord ? Mais ce que vous pouvez faire, c'est que vous pouvez, euh, créer un objet d'erreur personnalisé et vous pouvez lancer l'objet d'erreur et nous pouvons voir comment l' erreur se produit. C'est quelque chose que tu peux faire ici. OK. Donc, une fois les données récupérées ici, vous pouvez dire une nouvelle erreur ou lancer une nouvelle erreur. Vous devez lancer l' erreur, lancer une nouvelle erreur. OK. Supposons que vous ayez cette erreur lors de la transmission du GSN Vous pouvez donc dire « Oups ». Donc ça va venir de l'extérieur. Vous pouvez dire que quelque chose s'est mal passé. Quelque chose s'est mal passé, quelque chose comme ça, et tu peux le sauvegarder. Vous pouvez voir l'échec de la récupération des données, n'est-ce pas ? Parce que nous lançons une erreur personnalisée ici manuellement, accord, pour simuler la situation d'erreur. C'est bon. Et si vous accédez à la console, vous devriez voir une erreur s'afficher. Vous pouvez voir une erreur lors de la récupération des données, problème s'est produit sur cette diapositive OK ? Vous pouvez également voir le message. OK ? Vous êtes en train de créer un journal des points sur la console. Vous pouvez faire une erreur de point sur la console. C'est une bonne pratique ici. En ce qui concerne les erreurs de journalisation. Maintenant, si vous actualisez, vous verrez le message à refaire s' afficher en rouge Hein ? C'est ainsi que cela fonctionne, et ça se lance deux fois parce que nous sommes dans un mod strict, bien sûr. Donc oui, voici comment vous pouvez gérer l'erreur ici. OK ? J'espère que c'est clair et que cela vous donne une bonne indication de la manière dont vous pouvez créer des applications conviviales car, vous savez, choses comme l'EPI prennent du temps à charger les réponses prennent du temps à être affichées ou toute sorte d'erreur se produit Ce sont toutes des situations normales. Ce sont tous des cas H qui peuvent se produire. Et bien entendu, lorsque vous créez des applications dynamiques consommant des API, il est important que vous sachiez comment y faire face. accord ? J'espère que cela vous sera utile, et j'espère que cela vous donnera bonnes connaissances sur la façon dont vous pouvez travailler avec les API. Donc, oui, c'est à peu près tout. Je te verrai bientôt. 7. Simplifier les appels d'API dans React avec Axios: Salut, voilà. Il est donc temps de commencer à parler d'Axis. Maintenant, qu'est-ce qu'Axis ? Axis est un client HTTP basé sur des promesses pour JavaScript. D'accord ? Maintenant, quand je dis JavaScript, cela signifie qu'il s'exécute sur le navigateur, nodejs, React, etc. D'accord ? Maintenant, c'est le site officiel de axisxshttb.com, et vous pouvez Une simple recherche sur Google dans la bibliothèque Axis ou n'importe où, comme sur Google ou sur n'importe quel moteur de recherche favori de votre choix, vous verrez ce premier lien ici, qui est l'introduction au document HTDP d'Axis OK, donc c'est l'URR ici. Si vous visitez ce site Web, vous verrez quelques détails sur ce qu'est Axis. Et sur le côté droit, vous pouvez voir du code qui illustre le fonctionnement d'Axis. Il s'agit d'une simple demande d'obtention qui est en cours d'exécution. Hein ? Désormais, axis et fetch sont les deux méthodes les plus populaires pour effectuer des requêtes HTDP en JavaScript Mais certaines raisons expliquent pourquoi l'accès est utilisé. L'accès est simple. Il a un concept d'intercepteurs, d'accord ? Donc, des intercepteurs, ce qui signifie que si, par exemple, chaque appel d'API de votre application doit également comporter un jeton OT, ou une sorte d'en-tête cohérent entre tous les appels d'API, alors vous pouvez avoir le concept d'intercepteurs lequel vous pouvez avoir une gestion centralisée de ces Ce sont des intercepteurs, d'accord ? Donc oui, l'accès est également très populaire avec Fetch. Fetch est donc un moyen intégré de faire des appels d'API. Access est une bibliothèque. OK, alors vous venez ici sur cette page. Si vous dites « démarrer », vous serez redirigé vers cette page, où vous verrez certaines des fonctionnalités d'Axis. Vous pouvez voir qu'il permet d'intercepter les demandes et les réponses à l'aide d' intercepteurs Vous pouvez faire en sorte que toutes ces sortes de supports soient compatibles avec l'API promise. Je peux transformer les données de demande et de réponse. Vous pouvez également annuler la demande. Il y a des délais d'attente. D'accord ? Cela donne donc un peu plus de flexibilité par rapport à Fetch ici D'accord ? Vous pouvez voir la définition des limites de bande passante pour le siège du nœud. Gestion automatique du JSN dans la réponse, d' accord, publication de formulaires HTML au format JASN Tout ça. Maintenant, ce n'est pas disponible par défaut. Vous devez installer ce package NPM installed axis. D'accord ? Si vous utilisez BR, vous pouvez l'utiliser. Donc pour NPM, c'est une commande pour BoA, c'est une commande, et pour Yarn c'est une commande, d'accord ? Il existe d'autres façons de l'utiliser en utilisant ces balises de script ici. D'accord ? Maintenant, si vous regardez l'exemple ici sur le côté gauche, si vous cliquez sur ce bouton d' exemple, vous verrez comment vous pouvez l'utiliser. D'accord ? Vous pouvez voir que c' est le code qui permet de faire une requête get et de gérer la réponse, détecter l'erreur et enfin de l' avoir également. D'accord, enfin, elle est toujours exécutée , que la demande ait été acceptée ou non. OK. C'est donc une démonstration ici. Nous allons essayer un exemple pratique ici pour Axis et nous verrons comment nous pouvons l' utiliser dans notre projet. D'accord ? J'ai un projet simple ici, d'accord, où je suis en train de recevoir un appel d'API en utilisant fetch OK, je lance une erreur personnalisée, que je vais désactiver. Donc, s'il n'y a pas d'erreur, vous verrez , d' accord, donc je vois toujours une erreur ici. J'ai donc fait une mise à jour complète, et cela a vraiment fonctionné, d'accord ? J'ai donc simplement commenté l'erreur personnalisée que je générais, et voici le résultat. Vous pouvez donc voir l'état de chargement ici, d'accord, en cours de chargement. Et nous gérons le chargement et les erreurs ici. S'il y a une quelconque erreur, nous l'affichons. Et nous gérons ces trois chargements de données et ces erreurs à l' aide des États, et nous utilisons Fetch ici, d'accord ? Transformons maintenant cette chose, je dirais en axe. Maintenant, la première chose dont nous avons besoin, c'est d'avoir accès à un terminal, alors dirigez-vous vers le terminal ici. OK. Cela vous donnera un terminal dans le répertoire de travail actuel. Vous pouvez donc taper PWD et voir où vous êtes. En fait, je suis en train de travailler sur mon projet ici. OK. Je vais dire clair. Et maintenant, vous pouvez voir cette commande ici, où elle disait : Voici comment vous pourriez installer Axis. Je vais simplement copier cette commande car j'utilise NPM Et je vais le faire passer ici. OK. Maintenant, cela ajoutera du NPS. Désolé, cela ajoutera Axis à mon application ici. D'accord ? Il a donc été ajouté avec succès. OK. Et ce que je ferais, c'est que vous pouvez le confirmer en vous rendant sur package point hasN ici, et je vais essayer ce terminal ici. Vous pouvez voir que l'axe a été ajouté en tant que dépendance, d'accord ? Donc oui, cela a été fait, et Axis est maintenant disponible pour notre usage. Maintenant, tout d'abord, si vous utilisez l'axe, vous devez également l'importer. Je vais donc ajouter une déclaration d'importation en haut. Je dirais l'axe d'importation suggestion automatique et sa complétion automatique ici. D'accord ? Nous allons donc envoyer cette instance d' axe ici. Maintenant, ce que nous devons faire, c'est qu'au lieu de récupérer, nous allons le transformer en axe, n'est-ce pas Donc, au lieu d'aller chercher ici, d'accord ? Je dirais Axis. Tot, viens ici. D'accord ? Voilà ce que c'est. D'accord ? Je vais répondre alors. Et lorsque c'est le mieux, nous convertissons la réponse en JCN Avec Axis, vous n' avez pas besoin de faire cela. D'accord, vous obtenez la réponse sous forme de JSN lui-même. Donc, si vous venez ici, vous verrez l'une des fonctionnalités de gestion automatique des données JCN dans la réponse, n'est-ce pas ? C'est donc une bonne chose. Alors voilà, cette étape va disparaître, d'accord ? Ça va disparaître d'ici. Ici, au lieu de Chasin, nous pouvons simplement renommer ces deux réponses Je pourrais dire réponse, quelque chose comme ça. Je dirais des données fixes. Les données définies sont une réponse. Maintenant, cette réponse a en fait cette réponse est un objet et elle a un attribut de données. Vous devez y accéder de cette façon, en répondant aux données des points. D'accord ? Et vous pouvez également créer un journal de console pour les réponses et voir ce qu'il imprime. ce que je vais faire. Journal de la console et réponse ici. OK. Nous vérifierons les journaux de la console sous peu, d'accord ? Mais c'est ainsi que cela fonctionne et vous pouvez définir les plis de chargement. Vous avez le piège dans lequel vous détectez l'erreur, et le reste est pareil ici, d'accord ? Et oui, je pense que ça devrait très bien fonctionner. Je vais juste le sauvegarder et je vais le faire en dur ou en frais. OK. Vous voyez le résultat. Maintenant, si vous vous dirigez vers la console, nous devrions voir, alors laissez-moi passer à la console, laissez-moi effectuer un petit zoom arrière. OK. OK. Donc, c'est bon. Maintenant, si vous voyez si je l'agrandis, d' accord, vous pouvez voir l' objet en cours d'impression, d'accord ? Ou laissez-moi simplement passer en plein écran, d'accord, ce serait mieux là-bas. D'accord ? Voici donc le résultat ici. D'accord ? Laisse-moi aller inspecter. Dites maintenant « Console ». Maintenant, vous pouvez voir l'objet en cours d'impression. Maintenant, c'est l'objet, d'accord, que nous obtenons. C'est un objet de réponse, en fait, n'est-ce pas ? Et cela contient des données. Vous pouvez consulter ces données. Donc, si vous souhaitez accéder aux données à partir de l'API dont vous disposez, vous pouvez réellement dire données par points de réponse. D'accord, c'est ainsi qu'il le gère, et les en-têtes sont essentiellement les en-têtes dans lesquels vous avez des données de configuration D'accord ? Vous avez des informations relatives à votre demande. Tu as un statut. Donc, si vous souhaitez accéder au statut, quel est le statut de la demande ou de la réponse ? Vous pouvez indiquer le statut du point de réponse. Vous pouvez le gérer de cette façon. D'accord ? Donc oui, l'objectif est de vous montrer à quoi ressemblent les données de réponse si vous utilisez Axis et que vous devez utiliser les données des points de réponse ici. D'accord ? Donc oui, voici comment vous pouvez commencer à utiliser Axis. Et j'espère que c'est assez clair. Vous pouvez également gérer l'erreur de cette façon si vous souhaitez, vous pouvez le constater, ne pas récupérer les données Et si vous venez ici, d'accord, vous verrez une erreur lors de la récupération des données, quelque chose s'est mal passé D'accord ? Il s'agit du message d'erreur que nous avons transmis. D'accord ? Vous pouvez voir que quelque chose s'est mal passé, non ? C'est ainsi que les choses fonctionneraient. Je vais juste commenter ça, d'accord. Mais oui, c'est Axis pour vous et j'espère que vous savez assez bien ce qu'est Axis et comment vous pouvez l'utiliser. 8. Exécuter plusieurs requêtes GET simultanément: Commençons donc par parler de la façon dont vous pouvez déclencher plusieurs requêtes Get avec axis, d'accord ? Nous utilisons donc ici l' axe pour déclencher ce point de terminaison. OK, c'est le point final du post. Et si vous venez ici, d'accord, c' est Jason placeholder dotpco.com Et voilà, je déclenche ce premier point de terminaison. Je veux déclencher un autre point de terminaison, disons un utilisateur, je vais l'ouvrir dans un onglet séparé et vous pouvez voir que ce sont les données que je dois obtenir. OK, disons que je souhaite également déclencher cet appel d'API. Comment pourrais-je m'y prendre ? OK ? Donc, ici, ce que nous allons faire, c'est ici, je vais dire point d'axe tout au lieu de point d'axe. OK ? Ou nous pouvons garder le point d'axe Get et nous devrons déplacer cet appel Get vers le point d'axe O. D'accord ? Donc, point d'axe O, quelque chose comme ça. Maintenant, ce que fait le point d'axe O, c'est qu'il accepte un tableau, d'accord ? Et je vais couper ça ici, couper ça. Et je vais le déplacer dans ce tableau ici. OK ? Alors permettez-moi de mieux aligner les choses. OK. Permettez-moi d'aligner cela. Eh bien, d'accord, nous l'avons ici. OK. Et puis vous êtes ici, qui était là très tôt également. OK ? Mais maintenant, vous passez cet unique appel EPI ici Ce que je vais faire, c'est le copier. Je vais ajouter une virgule ici. Au final. J'ajouterai un autre appel EPI, je copierai ce point de terminaison utilisateur ici, et je remplacerai ce deuxième appel le point de terminaison utilisateur, quelque chose comme ceci Vous pouvez maintenant voir le point de l'axe O. Je vais juste effectuer un petit zoom arrière, le point de l'axe O ici, et nous effectuons deux appels EPI distincts, comme vous pouvez le voir Très bien, je vais juste étendre ça. Donc tu peux voir que c'est comme ça que ça se passe, d'accord ? Maintenant, ce que nous ferions, c'est ce que nous faisons à l'époque, et de temps en temps nous avons une réponse, d'accord ? Alors maintenant, nous devons trouver un moyen de gérer la réponse des deux séparément, d'accord ? Et pour cela, nous utiliserons le spread des points sur les axes. Vous pouvez voir la répartition des points sur les axes. OK ? Qu'est-ce que l'axe dot spread ? Donc, fonction de répartition des points sur les axes. La diffusion est donc une fonction qui permet de traiter les réponses séparément, d'accord ? Nous pouvons maintenant transmettre le message et les utilisateurs en tant que paramètre pour correspondre aux réponses du message et aux points de terminaison des utilisateurs séparément. Laissez-moi vous montrer comment vous pouvez le faire. Donc, ici, au lieu de la réponse, je vais me débarrasser de la réponse ici, et nous pouvons voir ici, poster Okay, et les utilisateurs. OK ? C'est quelque chose que tu peux faire ici. Vous verrez toutes les marques rouges ici, bien sûr, parce que vous utilisez une réponse et que la réponse n'existe pas. Je vais donc publier ce message ici et remplacer la réponse par un message, quelque chose comme ça. Je vois toujours une marque rouge ici. OK, j'ai compris. Donc, en gros, tout cela doit être à portée de main. OK ? Donc quelque chose comme ça. Donc, oui. J'espère que cela a du sens. Donc ici, le spread prend le dessus sur tout ça, d'accord ? Et vous avez des publications et des utilisateurs ici. OK ? La publication est essentiellement la réponse à la publication, et l'utilisateur est essentiellement la réponse du de terminaison de l'utilisateur ici. OK ? Et le spread nous permet de gérer les deux séparément, d'accord ? Je suis donc en train de me connecter au post ici. Je vais également enregistrer les informations utilisateur ici. OK. Permettez-moi de dire utilisateur OK, utilisateurs. Laisse-moi enregistrer ça. Vous pouvez voir que le message fonctionne parfaitement. OK ? Vraiment génial. Je vais me rendre pour inspecter, ou je vais simplement clore cette inspection. Pas ici, mais je vais avoir cette vue en plein écran, et nous allons l'actualiser. Vous pouvez voir le message affiché. Je peux inspecter, consoler. Vous pouvez voir l' objet imprimé quatre fois, car chaque objet est imprimé deux fois en raison du mode strict. Vous voyez donc ces données ici. Il s'agit des données de publication. OK ? C'est la première chose à faire, publier des données. Et puis nous avons à nouveau les données de publication. OK, il s'agit donc d'une donnée utilisateur, vous pouvez le voir. Il s'agit d'une information utilisateur en cours de récupération. Encore une fois, il s'agit des données de publication, 100 et voici les informations utilisateur, encore une fois, soit dix utilisateurs, n'est-ce pas ? Donc oui, c'est ainsi que vous pouvez gérer et travailler avec plusieurs appels d'API. Et c'est l'une des fonctionnalités ou de la flexibilité qu' Axis nous offre. OK ? Vous disposez de ces deux données. Ce que tu peux faire, c'est décider de ce que tu veux faire. Vous pouvez stocker les informations relatives à la publication dans un état, et vous pouvez stocker les informations relatives à l'utilisateur dans un autre état, et vous pouvez les afficher ici. Vous pouvez également le rendre sur l'interface utilisateur. OK ? Mais oui, jusqu'ici tout va bien, nous sommes en mesure de faire plusieurs appels d' API avec l'aide d'Axis, et j'espère que c'est assez clair pour vous tous. 9. Soumettre des données avec des demandes POST dans Axios: Il est donc temps de commencer à discuter de la manière dont vous pouvez utiliser la requête post dans votre application React ? Et pour cela, cliquez ici sur Jason Please holder, si vous faites défiler l'écran vers le bas. D'accord, vous trouverez ici cet EPI ou ce point de terminaison, qui vous permet de faire une demande de publication OK ? Donc, sur Slash Post, si vous faites une demande de publication, d'accord, il l'acceptera Et ici vous avez un guide d'utilisation par exemple. Je vais donc passer au guide d'exemples d'utilisation, et je vais faire défiler la page vers le bas. OK, vous pouvez voir cet exemple ici, d'accord ? Alors créer une ressource, d'accord ? Donc, ce que cela va faire, c'est que nous faisons une demande de publication. Vous pouvez voir que la méthode est postérieure. Il s'agit du corps que vous envoyez, des en-têtes, et c' est ainsi que vous gérez la réponse Maintenant, la réponse que vous recevez, d'accord, vous recevrez ce que vous avez envoyé, ainsi que l'identifiant ici. Ici, il s'agit d'une fausse API, donc la ressource ne sera pas vraiment mise à jour sur le serveur, mais elle sera fausse comme si. OK. Donc, ce que nous allons faire ici, c'est que je viendrai ici. OK. Et ici, il nous faut un formulaire. Donc ici, je vais créer un formulaire, je dirais formulaire, quelque chose comme ça, et le formulaire n'aura rien. J'aurai juste un bouton qui déclenchera simplement une demande de publication. Je vais donc dire type de bouton, je dirais soumettre ici. D'accord et je vais dire ajouter un post, quelque chose comme ça. OK ? Tu as ce bouton ici, d'accord ? Maintenant, en cliquant dessus, nous voulons que la demande de publication soit déclenchée. OK ? Je vais donc dire « sur la soumission », ici sur « Soumettre ». Maintenant, je dois ajouter une fonction. J'ai besoin de lier cela à une fonction, donc je vais dire handle, submit. OK. Cela n'existe pas encore. Bien sûr, nous devons le créer, non ? Donc, ici, ce que je vais faire, c'est créer cette fonction const on submit OK ? Je vais donc dire const on submit Quelque chose comme ça. Oh, désolé, ne soumettez pas, gérez l'envoi. Ce n'est pas sur Submit Handle Submit, quelque chose comme ça. Je dirais événement. Il acceptera donc l'événement ici, et j'ai cette définition de fonction ici, quelque chose comme ça. OK. Très bien, maintenant j'ai besoin de la logique pour gérer essentiellement la demande de publication OK ? Donc, ce que je vais faire, c'est d'abord créer un nouveau post, d'accord ? Maintenant, les données que je dois envoyer sont le corps du titre et le nom d'utilisateur. C'est ce que je dois envoyer, non ? Je vais donc le copier et je viendrai ici, d'accord. Et ici, je vais dire const, new post, et je vais créer un post, quelque chose comme ça. OK ? OK. Je vais m'en tenir à plusieurs lignes. C'est tout à fait normal. OK, quelque chose comme ça. OK, donc c'est le post. C'est ce que je dirais. C'est l'objet que je souhaite publier, non ? Le titre est donc fu, le corps est bar et le nom d'utilisateur en est un. OK ? Maintenant, ce que nous pouvons faire ici, c'est qu'une fois cela créé, je vais utiliser un axe. Je vais donc ajouter un axe et vous pouvez voir la déclaration d'importation être ajoutée en haut Nous allons donc utiliser l'axe. Je dirais axis point Post. OK. Et la publication est une méthode que nous allons utiliser. Je dois transmettre l'URL ici, puis je dois l'utiliser pour gérer la réponse. Oups. Alors pour gérer la réponse, quelque chose comme ça. OK. Donc, ici, ce que je ferais, c'est que j' ai besoin du OK, je dois le fermer également ici. OK. Et je vais me débarrasser de ce support ouvert. OK, fermer le support. Donc, dans la publication, je dois transmettre l' URL et le nouvel objet de publication. Je vais donc venir ici. Il s' agit du nouvel objet de publication. OK. Je vais donc le mentionner ici. Et à la fin, je dirai un nouveau message par une virgule. C'est donc l'objet que je transmets. OK, quelque chose comme ça. Laisse-moi passer en plein écran avec ça. C'est bon. Je vais juste passer en plein écran pour que vous puissiez tout voir. OK. Vous pouvez voir le point d'axe ici, et je transmets le nouvel objet de publication en même temps que celui-ci. Et maintenant, à l' époque, ce dont j'ai besoin c'est de dire réponse, d'accord, fonction flèche. Et ici, je dois maintenant m' occuper de la réponse. OK ? Comment est-ce que je gère la réponse ? Je vais juste dire « console point log » ici, d'accord ? Et je dirais qu'un nouveau post a été ajouté. Quelque chose comme ça, et je vais juste dire données par points de réponse. OK ? Comme. D'accord, alors je vais dire « set data », oups OK, les données définies n'existent donc pas. Nous devons ajouter un État ici. OK ? Donc, ce que je vais faire, c'est dire const data, et je vais dire set data Je vais utiliser use state ici. OK. Et ici, ce que nous allons faire, c'est appeler des données fixes, quelque chose comme ça. Et ici, je vais dire réponse. points et des virgules et je vais déstructurer les données, quelque chose comme ça. C'est bon. Donc c'est fait, je suppose, bien. Aucun problème en tant que tel. Et oui, handle submit est également lié à cela. OK. Alors maintenant, permettez-moi de minimiser cela. Et ici, je vais faire un rafraîchissement, un rafraîchissement rapide. Nous allons également ouvrir la console pour voir quelle sortie nous obtenons. Et je dirais d'ajouter un post ici. OK. Au moment où je dis « au poste », oups, je ne vois rien D'accord, je dois donc aussi dire E point, empêcher empêcher le défaut, empêcher le défaut. Je dois donc le dire, et maintenant essayons. OK. Je vais donc dire publication d'annonce. Oups Cela indique donc que les données ne sont pas itérables. Je reçois également une erreur ici sur la ligne 16 ici. OK ? Le problème concerne donc les données des points de réponse, et je suis en train de déstructurer les données OK ? Cela donne donc une erreur et l'erreur est une promesse non codée Les données ne sont pas irrécupérables. Donc ce que je ferais, c'est me débarrasser de ce truc ici, de ça. OK. Et je vais enregistrer ça. Laisse-moi te rafraîchir. OK. Je me suis donc débarrassé de cette partie ici. OK. C'est maintenant assez simple. Je vais dire ajouter un article et vous pouvez voir, d'accord, le message ajouté et ajouté qui est également affiché ici. C'est bon. Donc oui, voici comment fonctionnerait une demande de publication lorsque vous travaillez avec Axis. OK ? C'est assez simple. Je vais juste passer en plein écran pour que vous ayez une meilleure vue. Je vais juste zoomer un peu. OK. Nous en faisons usage. C'est là que se trouve le nœud, d'accord ? Vous dites donc axis point post, spécifiez l'URL et l' objet que vous souhaitez publier. OK ? Ensuite, vous avez le contrôle ici, et vous gérez la réponse que vous obtenez. C'est bon. Donc oui, il s'agit de la demande de publication avec axis. J'espère que cela vous a été utile et j' espère que vous avez pu suivre. 10. Optimiser la sécurité des API avec Axios Interceptors: Il est donc temps de commencer à parler intercepteurs et de comprendre ce qu'ils sont Maintenant, j'ai un exemple déjà écrit, dans lequel j'ai cet en-tête et un bouton pour ajouter un article, d'accord ? Et lorsque je clique sur Ajouter une publication, une requête de publication est envoyée à un serveur distant, et vous pouvez voir les données publiées dans la console. Après la réponse réussie de la demande de publication, d'accord ? Et vous verrez cela se produire plusieurs fois. OK. Nous utilisons cette fausse API ici, qui est l'espace réservé à Jason, et si vous faites défiler la page vers le bas, j'utilise l'API de publication ici C'en est une, d'accord ? Pour en revenir au code , d'accord ? Il s'agit de la base du code. Maintenant, que sont les intercepteurs et pourquoi en avez-vous besoin ? OK ? Maintenant, les intercepteurs sont des objets dotés d'axes qui vous permettent d'exécuter du code personnalisé ou d' intercepter la demande, avant qu'elle ne soit traitée ou interceptée J'espère que cela a du sens. intercepteurs ne sont donc rien, mais ils vous permettent d' intercepter la demande avant qu'elle ne soit acceptée ou capturée, Maintenant, pourquoi voudriez-vous faire cela ? Vous souhaiterez donc peut-être avoir une sorte de code personnalisé à exécuter avant envoi d'une demande ou après la réception d'une réponse. OK ? Maintenant, le code personnalisé peut impliquer des choses comme ajout d'un jeton d'authentification ou quoi que ce soit de ce genre, d'accord ? Alors dans ce cas, ce concept d'intercepteurs entre en ligne de compte, non ? Permettez-moi donc de vous montrer comment vous pouvez l'utiliser. OK ? Donc, ici en haut , disons que j'aurai un intercepteur Je dirais Axis Tot Je dirais intercepteurs. Vous pouvez voir l'intercepteur de propriétés et vous avez request tot, use OK ? Donc tu en as besoin ici, d'accord ? Maintenant, dans le cadre de l'utilisation, ce que vous feriez, c'est ce que nous allons utiliser. Ici, je vais avoir la fonction flèche. Je vais dire demande. OK ? Pour chaque demande, tu me donnes un journal de console, d'accord ? Le journal de la console devrait être la demande de démarrage, d'accord ? Quelque chose comme ça. OK. Maintenant je vais enregistrer ça, d'accord ? Maintenant, si je viens ici, si j'ouvre la console, laisse-moi la vider. Laisse-moi te rafraîchir. OK. Maintenant, si je dis ajouter un message, vous verrez une demande de départ. Oups, il y a une erreur ici. OK ? L'erreur indique que ce n'est pas une promesse, tapez une erreur, d'accord ? J'ai donc eu l'erreur. L'erreur est que nous devons renvoyer la demande ici. OK ? C'est une erreur que j'ai commise. Si vous venez ici, si vous actualisez, effacez, et si je dis au poste, vous verrez une demande de démarrage ajoutée à un nouveau message, d'accord ? N'oubliez donc pas de le retourner ici. OK ? Donc oui, cela sera intercepté et imprimé pour chaque demande ici Tu peux voir. Pour chaque demande, vous voyez une demande de départ, n'est-ce pas ? Vous avez accès à l'objet de la demande que vous pouvez imprimer ici. Je peux donc faire une demande ici. OK. Si je viens ici, j'actualise, si je dis ajouter un message, vous pouvez voir que j'ai accès à l'intégralité de l' objet de la demande ici. Je peux ajouter ou supprimer toutes sortes d' en-têtes personnalisés que je souhaite OK ? Je peux donc dire requêter des en-têtes à points, je peux les utiliser de cette façon et je peux les personnaliser Je peux ajouter Je peux ajouter n'importe quel type de jeton. Ainsi, par exemple, si une demande est authentifiée, n'est-ce pas, et vous devrez peut-être transmettre le jeton depuis le stockage local, n'est-ce pas ? Maintenant, où que vous utilisiez Axis, cela serait vraiment fastidieux , n'est-ce Vous pouvez donc définir un intercepteur. À l'échelle mondiale. Et chaque fois qu'une demande est envoyée au serveur, vous pouvez avoir une logique ici selon laquelle vous accédez au stockage local, obtenez le jeton que vous souhaitez transmettre au serveur, et vous pouvez le formater ici et l'ajouter à l'en-tête. Vous pouvez donc définir des en-têtes à points de demande, ajouter le jeton et le conserver là-bas Donc, ce qui se passerait, c'est que pour chaque demande, le jeton est ajouté parce que c'est le code par défaut, n'est-ce pas ? serveur en a besoin. Vous n'avez donc pas besoin de reproduire ce code partout. C'est comme ça que ça aide, d'accord ? Et c'est un intercepteur de requêtes. J'ai un intercepteur de réponses que je voudrais également vous montrer OK ? Donc, les intercepteurs de points axiaux , point, ce serait une réponse, si vous le devinez bien Tu dois dire « utilise-le ici ». Oups, nous allons dire utilisation, et nous allons utiliser ça, d'accord ? Et ici, vous verrez une réponse, et vous pouvez avoir quelque chose comme ça. Vous allez créer un journal de console ici. OK. Tu peux dire réponse. OK. Oups. Et ici, tu peux dire « réponse ». Comme ça. OK. Et ici, retournez la réponse. Quelque chose de W. D'accord. C'est donc pour chaque réponse, vous avez également accès à la réponse. OK ? Permettez-moi donc de me rafraîchir. Transparent. Je dirais ajouter un post. Vous pouvez voir la demande de départ. Vous avez l' objet de la demande, la réponse, vous avez les données de réponse, puis vous les voyez s'imprimer. Maintenant, d'où est-ce imprimé ? C'est à partir de là qu'on l'imprime ici. Tu peux voir. Donc, cette chose a finalement été exécutée. OK ? Qu'est-ce que cela signifie ? Cela signifie que l'intercepteur est appelé en premier chaque fois que la réponse est reçue, puis que les données sont traitées d'ici là Vous pouvez le voir ici. Cette partie est donc exécutée en premier chaque fois que la réponse est reçue, et cette partie est exécutée avant que les données ne soient envoyées au serveur. OK ? J'espère donc que ce concept d'intercepteur est clair et j'espère que vous comprenez bien comment cela fonctionne Vous pouvez jouer avec cela et examiner les données interceptées, et j'espère que cela vous a été utile. 11. Créer des instances Axios personnalisées pour un meilleur contrôle: Salut, voilà. Il est donc temps de commencer à parler d'instance d' axe personnalisée. Maintenant, qu'est-ce qu'une instance d' axe personnalisée ? Nous utilisons donc ici l'axe, d'accord ? Mais avec axis, vous pouvez créer une instance d'accès personnalisée qui est version préconfigurée d' axis pour votre application Et lorsque vous le créez, vous pouvez définir des options par défaut telles que les en-têtes d'URL de base, tous les types d' en-têtes par défaut dont vous avez besoin, tous les types de paramètres de délai d'expiration que vous souhaitez attribuer à la demande dans votre application donc utiliser tous ces types de configurations globales Vous pouvez donc utiliser tous ces types de configurations globales avec l' instance d'axe personnalisée et chaque appel d'API que l'ensemble de l' application va effectuer pour tous les composants utilisera cette instance d'axe personnalisée, n'est-ce pas ? Alors, par exemple, laissez-moi vous donner un scénario. Voici donc cette demande de publication. J'ai peut-être une autre requête Get ici dans ce même composant. Maintenant, j'ai peut-être des milliers de composants, non ? Des centaines de composants, disons , dans ce cas particulier, disons qu' au moins 50 composants ont des appels d'API. Hein ? Donc, s'ils ont des appels EPI, vous allez répéter toute cette URL là-bas OK ? Ce n'est pas bon, d'accord, parce que demain si l'URL du serveur change, ce n'est pas bon. Si un quelconque paramètre change, d'accord, vous devez apporter des modifications à tous les fichiers là-bas. OK ? Il est préférable d'avoir tout le code courant lié à la configuration dans un seul fichier afin que, s'il y a des modifications, vous puissiez les modifier à un seul endroit, puis tout sera propagé partout, n' vous puissiez les modifier à un seul endroit, est-ce pas ? C'est donc là qu' intervient l'instance d'accès personnalisé . Donc, pour créer une instance d'accès personnalisée, je vais vous montrer comment cela fonctionnera, d'accord ? Nous sommes donc en train de créer un post EPI. Ce que nous pouvons faire, c'est dire « const API ». Vous pouvez l'appeler comme vous voulez, mais j'aime bien l'appeler API. Vous pouvez dire point d'axe, créer ici. OK ? C'est ainsi que nous créons l'instance d'axe personnalisée , dans laquelle vous pouvez définir toute la configuration. accord ? Maintenant, quelle configuration pouvez-vous avoir ici ? OK ? Donc, par exemple, pour ce truc, ce que je peux faire, c'est l'obtenir. Je l'ai coupé et ici, je vais dire p URL. Vous pouvez voir le PaceRL. Vous pouvez dire deux points, je peux ajouter un PRL ici, quelque chose comme ça OK ? Oups. Donc pas de backticks, je vais prendre ça OK. Il s'agit de l'URL de base pour toutes les demandes d'API. OK ? Alors je peux avoir des en-têtes ici. Vous pouvez voir cette propriété d' en-têtes. Je peux dire que dans les en-têtes, je veux que les en-têtes par défaut ici soient similaires à tous les en-têtes par défaut que vous pouvez Supposons donc que je veuille avoir une autorisation ici, d' accord, et que je souhaite avoir, disons, porteur et vous pouvez ajouter un jeton ici, d'accord ? Donc, quel que soit le jeton que vous avez, vous pouvez l'ajouter. OK, et envoyé, il est envoyé avec l'API, d'accord ? Vous l'avez défini. Comment en faites-vous usage ? OK ? Donc, ce que vous pouvez faire, c'est ici, au lieu d'utiliser axis point post ici, vous pouvez dire API, quelque chose comme ça , api point post, et cela va fonctionner, cela va l'utiliser comme BCRL et cela va s' assurer que ces en-têtes sont présents, Si je sauvegarde ceci et si vous venez ici, d'accord, j'ai cette application opérationnelle. OK, vous avez ce bouton ici, qui déclenchera une demande de publication. Maintenant, si je dis ajouter un article, accord, vous pouvez voir un nouveau message en cours d'ajout. D'accord. Je ne vois donc pas que cela fonctionne correctement, mais je ne vois pas la demande être imprimée ici. OK ? C'est donc quelque chose que je peux imprimer. OK ? Laisse-moi aussi imprimer ça, d'accord ? Donc, pour imprimer la demande , je vais ajouter Intercept ici, d'accord ? Nous ajoutons donc des intercepteurs de cette façon, axis, interceptors, point request, Tt use ici, quelque chose comme ça OK ? C'est ainsi que vous ajoutez normalement des intercepteurs. OK. Mais comme nous utilisons instance d'axe personnalisée, vous pouvez faire au lieu de l'axe ici, vous parlerez d'intercepteurs de points API OK ? C'est ce que tu vas faire. C'est bon. Et ici, vous allez dire « demande ici ». OK. Et ici, tu dois imprimer la demande. Je dirais console point log ici. Je dirais demande de départ. OK. Demande de départ. Par ici. Et vous pouvez ajouter l'objet de requête ici, quelque chose comme ça. OK ? C'est fait. Maintenant, si tu viens ici, d'accord, laisse-moi me rafraîchir. Si je dis ajouter un message, oups, je connais donc cette erreur C'est bon. Je dois également renvoyer la demande, d'accord ? Demande de retour. OK. Maintenant, cela devrait bien fonctionner. Un rafraîchissement par le feu. Si je dis publication d'annonce, vous verrez la demande être imprimée. Maintenant, si vous le développez , vous devriez voir que lorsque la demande a été envoyée, il y a un en-tête d'autorisation. Il s'agit de l' en-tête d'autorisation que nous avons ajouté via l'instance d' axe personnalisée ici qui est ajoutée et envoyée au serveur. Vous pouvez avoir n'importe quelle logique ici où vous allez chercher, vous savez, une sorte de jeton et tout ça, vous pouvez l'afficher, d'accord ? C'est donc vraiment utile d'une certaine manière, non ? Et oui, c'est ce que c'est. C'est ainsi que vous pouvez réellement avoir une configuration séparée de votre code. Maintenant, j'aimerais vous expliquer quand vous devez utiliser une instance d'axe personnalisée et quand vous devez utiliser des intercepteurs, d'accord ? Supposons donc que si vous envoyez un jeton, d'accord, vous pouvez également ajouter une configuration de jeton ici dans l'instance d' axe personnalisée, et vous pouvez également ajouter un jeton ici dans l'intercepteur Ainsi, chaque fois qu'une demande est envoyée au serveur, juste avant son envoi, vous pouvez ajouter un jeton ici. OK ? Alors, quand utiliser quelle méthode, non ? Maintenant, si votre jeton ou votre configuration est statique, toute sorte de configuration statique, OK, et qu'elle ne nécessite aucune modification, vous pouvez ajouter cette configuration à l' instance d'axe personnalisée ici. OK ? Par exemple, vous pouvez avoir une sorte de code ou une sorte d' en-tête que vous voudrez peut-être transmettre ici, qui indique le type de contenu. D'accord, vous pouvez donc dire le type de contenu ici. Donc, cet en-tête de type de contenu, d'accord, cela signifie application JSN OK. Donc, ce type d' en-têtes qui sont statiques, gros, peut être placé dans l'instance d'accès personnalisé Mais il existe des exigences selon lesquelles vous pouvez avoir des en-têtes dynamiques Maintenant, ce que je veux dire par en-têtes dynamiques, c'est que vous voulez ajouter un en-tête, accord, qui contient le jeton extrait du stockage local Désormais, le jeton de stockage local peut être actualisé de temps en temps. Il est possible qu'il ait une date d'expiration. Il n'est pas statique. Ce n'est peut-être pas statique, d'accord ? Donc, dans ce cas, juste avant l'envoi de la demande, vous voudrez peut-être exécuter un bout de code pour vérifier ce qu'est un jeton, obtenir ce jeton et l'envoyer avec la demande, d'accord ? Ainsi, dans ce scénario, vous utiliserez des en-têtes ajoutés dans l'intercepteur car ce n'est pas statique C'est dynamique, non ? Et juste avant l'envoi de la demande, vous voulez que la vérification des jetons soit effectuée, d'accord ? C'est donc ici que les intercepteurs pourraient être utilisés, n'est-ce pas ? Gestion automatique des erreurs. intercepteurs sont donc excellents pour gérer globalement les réponses aux erreurs. OK ? Donc, si votre réponse EPI indique qu'un jeton a expiré, par exemple 401 non autorisé Un intercepteur peut avoir le jeton d' actualisation automatiquement. D'accord, je devrais avoir le code pour actualiser automatiquement le jeton et réessayer la demande Nous avons donc ici l'intercepteur de requêtes. Vous pouvez avoir un intercepteur de réponse, dans lequel vous pouvez vérifier si l'erreur était 401 Si c'était 401, ayez simplement le code pour actualiser le jeton et réessayez OK. C'est donc quelque chose que vous ne pouvez pas faire avec une instance d'axe personnalisée ici, n'est-ce pas ? Parce que c'est statique, non ? Et oui, c' est la différence entre l' instance d'axe personnalisée et le concept d'intercepteur OK ? Beaucoup de mes étudiants peuvent avoir l'impression que le concept se chevauche, mais ils sont tous deux distincts. C'est ce que j' essaie de souligner. D'accord ? J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre Très bien, je vous verrai tous comme ça. 12. Surcharger les instances Axios personnalisées avec des intercepteurs: Maintenant, nous devons développer davantage cette instance d'axe personnalisée. OK ? Et ce que je ferais, c'est tout d'abord déplacer cela dans un fichier séparé. OK ? Ce code peut donc devenir un peu complexe. Donc, ce que je ferais, c'est couper ça ici. Je passerais à la structure de mon projet et je créerais un dossier ici. J'appellerais ce dossier comme vous pouvez l'appeler API. Vous pouvez appeler cela Utils, quelque chose comme ça. OK. Et ici, vous pouvez avoir api dot has. Et ici, vous pouvez coller tout ce code. OK. Et c'est donc nécessaire ici, importer un axe. C'est donc quelque chose que je vais déplacer ici dans ce dossier. OK. Et nous devons exporter l'API. Je vais donc dire export ou par défaut, et je vais dire API ici. OK, quelque chose comme ça. C'est bon. C'est fait. OK, l'API est exportée. Maintenant que nous sommes là, il ne nous reste plus qu'à saisir cette API. Je peux donc saisir ceci. OK. Vous pouvez voir l'API Utils, d'accord ? OK, donc pour une raison ou une autre, je n'aime pas ce nom de dossier Utils, donc je vais également le changer en API OK. Et je vais mettre à jour les entrées, non ? Donc oui, maintenant ça a l'air bien. Donc, ce que j'ai fait, c'est que j'ai ce dossier EPI dans lequel j' ai organisé mes Pat Js Et qu'est-ce que Pi Dot Gs ? Il comprend toute la configuration ainsi que les intercepteurs pour l'instance d' axe personnalisée ici OK ? Et tu peux l'utiliser où tu veux. OK ? C'est ainsi que nous l'utilisons. Et si vous venez ici et si je rafraîchis, accord, si vous dites chez Post, vous verrez que cela fonctionne parfaitement. OK, cela a donc rendu notre code un peu plus modulaire. C'est vrai. Maintenant, ce que nous pouvons faire, c'est améliorer cela ici. OK ? Nous transmettons donc cet en-tête. OK. Je vais me débarrasser de ce truc symbolique ici. OK. Supposons que nous ayons le concept de jeton dynamique ici, n'est-ce pas ? Donc, ce que nous pouvons faire, c'est ici, j'ai cette demande. OK ? Je suis en train de manger ça. Et ici, je peux ajouter une autre fonction. Je peux dire Cfico, quelque chose comme ça, et je vais ajouter une fonction flèche comme ça OK. Et ici, je peux dire « const token OK. Je peux obtenir le jeton, stockage local, point Get Item. Je reçois le jeton depuis mon stockage local, donc je vais dire jeton ici. OK. Et puis je peux réellement dire que si un jeton est trouvé, si un jeton est trouvé, que feriez-vous ? Vous diriez donc config tot headers. Vous pouvez donc l'appeler config ou requêter. C'est absolument bien. Donc ici, je l'appelle une requête, donc je l'appelle config ici. OK ? Je dis donc config point headers dot authorization Session, o est égal à. Je peux ajouter un jeton de jumelage. Je peux donc dire pairero que je dois l'ajouter dans ce format. Je peux dire jeton. Quelque chose comme ça. C'est bon. Le jeton ne sera donc ajouté que s'il est trouvé, n'est-ce pas ? Si le jeton n'est pas trouvé dans le stockage local, il est conservé. OK. Cela serait donc fait. Et si tu viens ici, d'accord ? Donc, les bras croisés, le jeton ne sera pas ajouté car il n'y a pas de stockage local pour le moment, d'accord ? Ce n'est donc pas de l'art, non ? Ce n'est pas difficile dans les en-têtes. Laissez-nous voir. Ce n'est pas un ajout. Vous pouvez le voir parce que je n'ai rien stocké dans le stockage local pour cette application pour le moment. Mais si vous en avez, si vous le stockez, vous l'obtiendrez et vous pourrez l'envoyer ici. OK ? Maintenant, ici, c'est fait. Ce que je peux faire, c'est que je peux même gérer. Je peux même ajouter une sorte de gestion des erreurs ici. Je peux donc dire erreur. Quelque chose comme ça, et je peux dire, oups, donc je peux dire erreur de point de console OK. Et ici, je peux dire erreur de demande, erreur demande, et dans notre espace, vous pouvez dire erreur. C'est bon. Et vous pouvez dire « promesse de retour », point « rejet ». Je suis en train de gérer Je rejette les erreurs de demande. Oh, d'accord. Je dirais des erreurs. OK, quelque chose comme ça. OK. Ce que je fais, c'est que je gère l' erreur de demande en utilisant ceci, d'accord. Et c'est une solution, d'accord. Ensuite, vous pouvez même ajouter l'intercepteur de réponse. Tout tourne autour de l' intercepteur de requêtes, jusqu'ici. Ce que je peux faire ici, c'est dire EPI point response. Oh, 1 seconde. Intercepteurs à points Pi réponse par points, réponse points P, réponse par points, point U. Voilà ce que c'est C'est bon. Et maintenant, dans ce cadre, nous devons ajouter la fonction flèche. Donc, ce que nous ferions, c'est répondre, quelque chose comme ça. OK. Et vous pouvez ajouter une sorte de manipulation ici. OK ? Maintenant, la manipulation que nous ajouterions, c'est que nous pouvons dire que si la réponse est réussie, nous retournerons simplement les données. Donc je réponds, puis je renvoie les données, non ? Nous allons donc dire OK, je réponds, c'est déjà écrit. Donc, en cas de réponse, renvoyez la réponse. OK, donc je n'ajoute pas de logique ici. Vous pouvez essentiellement avoir votre propre logique pour. Mais c'est comme ça que tu t' y prendrais ici. C'est le but, d'accord ? Vous pouvez donc réussir à vérifier ici la réponse, puis à renvoyer Tita. OK ? Vous renvoyez donc essentiellement la réponse. OK ? S'il y a une erreur, comment géreriez-vous cela ? OK. Donc, ici, vous pouvez simplement venir et vous pouvez dire, d'accord, laissez-moi ajouter un onglet ici. OK. Et maintenant, vous pouvez dire « erreur » ici. OK. C'est donc une erreur, et ensuite vous pouvez dire ceci. Et ici, vous pouvez dire si je peux dire erreur point point réponse. OK. Je vérifie donc expiration des jetons et toute autre erreur dans le monde entier. OK ? Je peux donc dire erreur, point, réponse, état du point ici. Oups, c'est le statut ici. Et si c'est égal à 401, d'accord, vous pouvez ajouter n'importe quelle sorte de manipulation ici. Vous pouvez dire erreur de point de console, quelque chose comme ça, et vous pouvez dire non autorisé. Quelque chose comme ça. OK. Vous pouvez le gérer ici et vous pouvez également ajouter la logique du nouveau procès en fonction du type d' erreur que vous obtenez OK. Si vous obtenez une erreur 500, d'accord, comme une erreur interne du serveur ou quelque chose comme ça, vous pouvez donc en ajouter une autre ici et vous pouvez demander une vérification supplémentaire. Vous pouvez dire si l'erreur est de 500. OK, alors vous pouvez dire erreur du serveur. Donc, en gros, je fais juste un journal ici, mais tu peux le gérer comme tu veux, d'accord ? Je vais ajouter des points-virgules OK, et je vais ajouter des crochets ici. OK. Je pense donc que la façon dont cela peut aider ici est assez claire. OK. Et une fois que c'est fait, accord, tout est fait, je peux dire « return promise point check over here », et je peux dire « erreur ». C'est bon. Vous rejetez donc essentiellement d'autres erreurs C'est bon. Donc oui, c'est ainsi que vous pouvez continuer à développer l'instance d' axe personnalisée. Il peut s'agir de l' API personnalisée qui possède les puits personnalisés, c'est-à-dire la configuration globale demandes d'API que vous effectuez, y compris les baseUrls Donc, si vous obtenez les URL de base à partir du fichier ENV, vous pouvez également avoir cette logique ici, d' Et vous pouvez le gérer séparément du fichier ENV. OK ? En-têtes demain si de nouveaux en-têtes sont ajoutés, d'accord ? N'oubliez donc pas qu'ici, vous ne codez pas l'URL en dur, vous ne codez pas en dur les en-têtes Vous utilisez simplement l'API et toute la logique liée au composant qui se trouve ici, d'accord ? Seule la logique liée au composant est ici, rien d'autre. Demain, si quelque chose change dans l'API, si des en-têtes sont nécessaires, vous devrez simplement effectuer le changement à un seul endroit, d'accord ? Dans ce cas, ce point pi js sera utilisé à tous les endroits. Donc demain, si vous avez 50 composants, c'est ce qui sera utilisé dans 50 composants. Vous n'avez donc pas à modifier les 50 composants, vous ne le gérez qu'une seule fois et c'est pris en charge. OK. Donc oui, c'est comme ça que ça marche. Et j'espère que vous en trouvez l'utilité ici. C'est bon. Donc oui, il s'agit de ces instincts et intercepteurs d'axes personnalisés, façon dont vous pouvez les fusionner et travailler avec eux. Et j'espère que cela vous a été utile. 13. Conclusion du cours: Cela nous amène à la fin de ce voyage transformateur dans le monde de l' intégration d'EPI dans Eh bien, nous avons étudié comment l'intégration d'API dans votre application peut changer la donne en matière création d'applications dynamiques basées sur les données. Nous explorons les principes fondamentaux que sont les appels d'API, gestion du chargement et des erreurs, et le renforcement de la sécurité en intégrant des instances d'accès personnalisées et des intercepteurs Nous avons également appris et exploré comment vous pouvez effectuer plusieurs appels d'API simultanément, et vous avez désormais acquis les compétences pouvez effectuer plusieurs appels d'API simultanément, et vous avez désormais acquis les compétences nécessaires pour améliorer vos projets React Mais n'oubliez pas que l'exploration ne s'arrête pas là. Je vous encourage à continuer à expérimenter, explorer et à repousser les limites du possible avec les EPI dans votre application React J'ai hâte de voir comment vous utiliserez ces compétences et connaissances que vous avez acquises pour dynamiser vos projets de développement Web N'oubliez pas que l'innovation consiste à adopter de nouvelles techniques et technologies, et que l'intégration des EPI ou le travail avec des EPI constituent un élément essentiel de votre boîte à outils de développement Merci d'être un groupe d'apprenants aussi engagés et enthousiastes. J'espère que ce cours vous a non seulement doté de nouvelles compétences techniques, mais qu'il vous a également incité à réfléchir de manière créative à la création d'applications Web robustes Dans ce cours, vous trouverez un projet de classe que je vous encourage à compléter et à partager avec l'ensemble de la classe dans la section des projets. Je vous souhaite bonne chance et bonne chance.