API-Integration in React mit Axios beherrschen | Anwendung mit Backend integrieren

1. Einführung in den Kurs: Willkommen zu den Kursen, in denen wir die API-Integration in React beherrschen werden. Mein Name ist Fassel und ich freue mich, Sie durch die spannende Welt der API-Integration in die Welt von React führen die spannende Welt der API-Integration in die Welt von React Ich bin ein Unternehmer mit einer Leidenschaft für den Online-Unterricht In meiner Karriere habe ich viele robuste Anwendungen entwickelt, . In meiner Karriere habe ich viele robuste Anwendungen entwickelt, die von Millionen von Benutzern auf der ganzen Welt verwendet wurden, und ich bin hier, um meine Erfahrung und mein Wissen mit Ihnen allen zu teilen meine Erfahrung und mein Wissen mit Ihnen allen In der heutigen dynamischen Welt ist die API-Integration einer der wichtigsten Aspekte, ist die API-Integration einer der wenn es darum geht, skalierbare Anwendungen für die Produktion zu entwickeln. Jede Webanwendung , die Sie sehen , hat ein Frontend und ein Backend Wenn Sie ein Frontend erstellen, ist es wichtig, dass Sie verstehen, wie Sie Ihre Anwendung integrieren und mit dem Backend-Server kommunizieren können Ihre Anwendung integrieren und mit dem Backend-Server kommunizieren Während unserer Reise werden wir uns eingehend API-Integration mit React Wir werden dafür Axis verwenden. Apropos Kurs Dieser Kurs behandelt viele Aspekte der API-Integration und der Durchführung von API-Aufrufen. Wenn Sie beispielsweise einen API-Aufruf tätigen, ist es wahrscheinlich, dass Sie nicht sofort eine Antwort erhalten. Wie können Sie also das Laden verwalten, um die Benutzererfahrung zu verbessern und wie können Sie Fehlerzustände verwalten? Wir werden auch den Prozess der API-Aufrufe vereinfachen und werden sehen, wie dies mit Axis durchgeführt und erreicht werden kann. Wir werden auch verstehen, wie Sie mit Axis gleichzeitige EPI-Aufrufe tätigen können gleichzeitige EPI-Aufrufe tätigen Wir haben auch ein Szenario, in dem wir verschiedene Arten von EPI-Anfragen wie Abrufen und Post-Anfragen behandeln werden verschiedene Arten von EPI-Anfragen wie Abrufen und Post-Anfragen . Wir werden die Sicherheit erhöhen, indem wir Interceptor verwenden All diese Funktionen all diese Dinge werden wir in diesem speziellen Kurs behandeln Und am Ende dieses Kurses kann ich garantieren, dass Sie über Fähigkeiten verfügen, mit denen Sie jede Art von EPI ohne Hilfe sicher in Ihre React-Anwendung integrieren können jede Art von EPI ohne Hilfe sicher in Ihre React-Anwendung integrieren ohne Hilfe sicher in Ihre React-Anwendung Und das würde Ihnen endlose Möglichkeiten in der Welt der Webentwicklung eröffnen Ihnen endlose Möglichkeiten in der Welt der . Für wen ist dieser Kurs gedacht? Dieser Kurs ist also perfekt für alle , die ihre Fähigkeiten zur Reaktionsentwicklung verbessern möchten Egal, ob Sie ein Neuling, ein erfahrener Entwickler oder ein fortgeschrittener Entwickler sind ein erfahrener Entwickler oder oder ob Sie jemand sind gerade erst erforscht, wie EPIs in Frontend-Anwendungen integriert werden können, dann ist in Frontend-Anwendungen integriert werden können, dieser Kurs perfekt für Sind Sie mit diesem Set also bereit, die Art und Weise, wie Sie mit APIs umgehen, in Ihre Webanwendung umzuwandeln APIs umgehen, in Ihre Webanwendung , die mit React erstellt wurde? Ich freue mich riesig, Sie durch diesen Kurs zu führen, und wir sehen uns auf der anderen Seite. 2. React-Projekt einrichten: Hallo, da. Jetzt ist es an der Zeit, dass wir mit der Erstellung unserer React-Anwendung beginnen, und das werden wir mit Hilfe der Befehlszeile tun . Also als Erstes gehe ich zum Projektordner oder navigiere über die Befehlszeile zum Projektordner. Was ich mit Projektordner meine, ist es ein Ordner meiner Wahl ist, in dem ich meine React-Projekte organisieren möchte, okay? Was Sie also tun können, ist, zum Finder zu gehen. Wenn Sie beispielsweise auf einem Mac sind, können Sie zum Finder oder wenn Sie wie ich Windows verwenden, können Sie zum Explorer gehen und einen Ordner an einem Ort Ihrer Wahl erstellen Sie können den Ordner nennen, wie auch immer Sie möchten. Ich würde es React nennen. Und dann können Sie von der Befehlszeile aus einfach zu dem Ort navigieren, können Sie von der Befehlszeile aus einfach zu dem Ort navigieren an dem Sie den Ordner erstellt haben. Also habe ich diesen React-Ordner hier an diesem bestimmten Ort erstellt , und CD ist der Befehl, das heißt Verzeichnis ändern, und er hilft mir, zu diesem bestimmten Ordner zu navigieren oder zu diesem bestimmten Ordner oder von der Befehlszeile aus in diesem Ordner zu sein. Jetzt bin ich in diesem speziellen Ordner, ich werde alles andere löschen. Ordnung. Jetzt werde ich in diesem speziellen Ordner mit der Erstellung meiner React-Anwendung beginnen. Und dafür werde ich NPX verwenden, okay? Ups. Ich habe also schon einige React-Anwendungen erstellt Sie können diesen Vorschlag also hier sehen, okay, aber ich kann nichts gegen den Vorschlag tun. Okay? Ignoriere diesen Vorschlag vorerst, denn was dieses spezielle Terminal tut , ist alles, was es in deiner Historie sieht, es schlägt dich einfach immer wieder vor, was gut ist. Ihnen den gesamten Befehl zu zeigen, das ist völlig in Ordnung. Also NPX Ich werde NPX verwenden. Okay? Nun, NPX ist syntaktisch, es wird verwendet, um die Node-Pakete auszuführen, oder es wird verwendet, um die Pakete auszuführen Und dann werden wir die Create React App verwenden. Ordnung. Was ist nun Create React App. Create React App ist eine Art Tool , mit dem Sie die gesamte React-Anwendung erstellen können. Nun, warum machen wir uns das zunutze? Weil, weißt du, das React-Projekt auf eine bestimmte Art organisiert werden muss. Es muss zum Beispiel den SRC-Ordner haben. Es muss einige Dateien haben. Und all das kommt zusammen und sie ermöglichen es Ihnen oder sie ermöglichen Ihrer Anwendung, reibungslos zu funktionieren , oder? Sie können diese Dateien also auch manuell erstellen. Dies ist jedoch ein Tool , mit dem Sie die Anwendungsstruktur auf die richtige Weise erstellen oder einrichten können. Okay? Und danach nenne ich einfach meinen Anwendungsnamen, damit ich sie MyRact App nennen kann, ungefähr so Okay. Und was ich tun kann, ist einfach Enter zu drücken. Sobald ich die Eingabetaste drücke, wird dadurch ein Ordner an diesem bestimmten Ort erstellt. An diesem bestimmten Ort wird also dieser Ordner erstellt. Warum wird an diesem Ort ein Ordner erstellt? Weil ich vom Terminal aus zu diesem Ordner navigiert habe und dies der Ordnername sein wird, unter dem alle Dateien meines React-Projekts existieren werden Okay? Sie können also die Eingabetaste drücken und Sie sollten sehen, dass irgendeine Art von Verarbeitung stattfindet. Sie können also sehen, wie an diesem bestimmten Ort eine neue React-App erstellt wird. Es werden einige Pakete installiert, und das kann ein paar Minuten dauern. Es wird also installiert. sagt dir auch, was es installiert. Es installiert React, React Dom, React-Skripte und alles, was es braucht. Wir werden also eine Weile warten, bis gesamte Vorgang abgeschlossen ist und wir eine Bestätigung sehen. Ich habe also die Bestätigung erhalten, und ich habe auch eine kleine Nachricht erhalten. Okay. Als ich mit der Aufnahme dieses Videos anfing, gab es eine neue Nebenversion, steht, dass NPM verfügbar ist, und sie fragt mich, ob ich ein Upgrade durchführen kann Okay, ich werde später upgraden. Du wirst das vielleicht nicht sehen, okay, aber ich werde es vorerst einfach ignorieren. Es ist nur eine Upgrade-Benachrichtigung. Sie können die Bestätigung hier sehen , viel Spaß beim Hacken. Ordnung. Und wenn du hier nach oben scrollst, siehst du den gesamten Prozess dessen, was passiert ist Also haben wir diesen Befehl hier ausgeführt. Ups Lass mich nach oben scrollen. Also haben wir diesen Befehl hier ausgeführt. Okay, wenn du herkommst, kannst du sehen, dass es so viele Pakete hinzugefügt hat. Es hat 36 Sekunden gedauert. Wenn Sie hierher kommen, okay, es heißt, dass diese spezielle Anwendung erfolgreich an diesem Ort und in diesem Verzeichnis erstellt wurde diese spezielle Anwendung erfolgreich an . Sie müssen also zu diesem Verzeichnis navigieren, und darin können Sie all diese Befehle hier ausführen . Okay? Sobald Sie navigieren und Ihnen vorgefertigte Befehle wie NPN Start gegeben haben, wird es auf dem Entwicklungsserver gestartet Die von Ihnen erstellte React-Anwendung verfügt also über einen eingebetteten Inblt-Server Sie können diesen Befehl ausführen, um die Anwendung zu bündeln und in statische Dateien zu speichern, hauptsächlich für die Produktionsbereitstellung. Dadurch wird der Test-Runner gestartet, falls Sie Testfälle ausführen möchten , NPM run Okay, das ist etwas, das Sie ausführen können. Der Vorschlag ist also, Sie damit beginnen können dies hier auszuführen. Ich kopiere das. Okay? Ich füge es hier ein. Ich gehe in dieses Verzeichnis, o, und dann sagt es dir NPM Start Nun, das ist ein Befehl, mit dem Sie einen Entwicklungsserver auf Ihrem lokalen Computer starten können einen Entwicklungsserver auf Ihrem lokalen Computer starten Also kann ich diesen Befehl auch ausführen, okay? Und Sie konnten sehen, wie die Anwendung lief. Das ist also die Anwendung, okay? Sie können sehen, dass der Browser automatisch geöffnet wird, und Sie können sehen, dass dies und Sie können sehen, dass dies die Anwendung ist, die läuft. Nun, das ist ein Server , der Ihnen Ihre Inhalte anzeigt oder ob er Ihre React-Anwendung im Browser ausführt. Jetzt werden Sie bei jeder Änderung, die Sie an den Dateien vornehmen, Live-Reloads hier sehen. Alles klar? Nun können Sie die Nachricht hier sehen, als ob Sie diese bestimmte Datei bearbeiten und speichern müssen , um sie erneut zu laden Okay? Also, diese Schnittstelle kommt aus dieser speziellen Datei, so steht es da. Und wenn du hier drüben klickst, ist dies der Link zur offiziellen Website von React. Darauf hat es verlinkt. Okay? Also kannst du auf diese Website gehen und dir auch ein paar Sachen ansehen oder lesen. In Ordnung. Aber ein paar Dinge, die ich hier erwähnen möchte: Sobald Sie den Entwicklungsserver gestartet haben, können Sie ihn beenden, indem Sie unter Windows auf Strg und C oder auf Mac auf Befehl und C drücken . Okay? Ich verwende Windows, also drücke ich Strg C und Sie können sehen, dass dieser spezielle Job beendet wurde. Und jetzt kommen Sie, wenn Sie versuchen zu aktualisieren, das wird nicht funktionieren. Okay, weil der Server ausgefallen ist, oder? Nun, um Ihren Server zum Laufen zu bringen, müssen Sie NBM Start in diesem speziellen Ordner ausführen Okay? Erst dann ist dein Server betriebsbereit. Während der Entwicklung können Sie also den Server eingeschaltet lassen und die Dateien tatsächlich ändern und die Änderungen speichern und live verfolgen. Okay? Nun werde ich etwas mehr über diesen Befehl erzählen Also haben wir die React-App oder die gesamte Anwendung mit diesem speziellen Befehl erstellt die gesamte Anwendung mit diesem speziellen Befehl Jetzt können Sie hier am Ende auch Optionen hinzufügen. Okay? Was Sie also tun können ist, hier Vorlagen zu verwenden. Okay? Nehmen wir an, wenn Sie mit React arbeiten, möchten Sie auch Typoskript verwenden. Okay? Also, wenn Sie Typoskript verwenden, können Sie so etwas hinzufügen Sie können hier Vorlage sagen und Sie können Typoskript sagen Ich werde das nicht ausführen, aber das ist nur eine zusätzliche Information. Dadurch wird die Typoskript-Vorlage verwendet , um Ihre Anwendung zu erstellen, und die Typoskript-Unterstützung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten, das von einer strengen Typprüfung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten profitieren kann profitieren In Ordnung. Also können Sie diesen Befehl auf diese Weise verwenden , in Ordnung. Ich hoffe, dieser Befehl ist klar. NPX erstellt React Tap. läuft also nicht, aber Sie können den Server jetzt erneut starten , indem Sie NPM run NPM start sagen . Es tut mir leid Es ist also NPM-Start, so etwas in der Art. Und wenn Sie es starten, wird der Server erneut gestartet. Ordnung. Also ich hoffe, das ist nützlich und ich hoffe, Sie konnten es verfolgen. 3. Einrichten unserer IDE – Visual Studio-Code: Dies ist unsere erste react-basierte Anwendung, die wir erstellt haben, okay? Oder ich sollte sagen, wir haben es nicht erstellt. Okay. Das ist also ein automatisch generiertes Projekt mit der Create React-App. Okay, und es gibt uns hier auch einen Hinweis. Sie können App Dot qs bearbeiten und speichern, um sie erneut zu laden. Okay? Es gibt einen Link zum Lernen von React , der Sie zur offiziellen Website von React führt. In Ordnung, so weit, so gut. Also das ist unsere Anwendung , die läuft. Was müssen wir jetzt tun? Wir müssen anfangen , Dinge zu programmieren und zu modifizieren. Und was werden wir dafür tun? Wir werden eine IDE installieren , die der ID Visual Studio-Code ist. Okay. Also so sieht es aus. Wenn Sie es schon auf dem Computer haben, gut und gut, wenn Sie es nicht haben, dann besuchen Sie diese offizielle Website. Es ist ein kostenloses Tool. Es ist kostenlos, basiert auf Open Source und läuft überall. Da ich Windows verwende, werde ich aufgefordert , eine stabile Version herunterzuladen, die für Windows entwickelt wurde Sie können zu dem Betriebssystem wechseln, das Sie benötigen. Aber wenn Ihr Betriebssystem hier ein Installationsprogramm hat, wird es automatisch Wenn Sie sich also hier von einem Mac aus anmelden, wird Ihnen der Download vom Mac angezeigt. Okay? Also, von welcher Plattform aus Sie das öffnen, es wird Ihnen diese Schaltfläche zeigen und Sie können das durchgehen wenn Sie nicht wissen, was Visual Studio-Code ist Aber laden Sie es einfach herunter und installieren Sie es wie jedes andere Softwareprogramm Ich habe es bereits installiert, daher werde ich Ihnen die Installationsschritte nicht zeigen, aber die Installationsschritte sind überhaupt nicht komplex. Es ist sehr einfach und unkompliziert. 4. Erste Schritte: Sobald Sie Visual Studio-Code erfolgreich installiert haben , Ihnen eine Seite wie diese angezeigt. Wenn Sie also Visual Studio-Code zum ersten Mal öffnen , wird diese Willkommensseite angezeigt. Nun, ich bin schon eine Weile ein Visual Studio-Code-Benutzer, okay? Und Sie sehen all diese aktuellen Projekte. Es ist also wahrscheinlich, dass Sie diese Liste der letzten Projekte erst sehen , wenn Sie ein Benutzer sind. Okay? Aber da ich ein Benutzer bin, sehe ich, wie gesagt, die Liste der letzten Projekte, die ich in der Vergangenheit verwendet oder erstellt habe. Außerdem werden Sie diese Optionen hier sehen: Neue Datei, Datei öffnen, Ordner öffnen, Git-Repository klonen, Verbindung zu all dem herstellen. Es ist ein sehr nützliches Tool. Visual Studio-Code, ich benutze ihn ständig. Nun, um das Projekt zu öffnen, kennen Sie den Ordner, in dem Sie das Projekt erstellt haben. Sie können also einfach hier auf Ordner öffnen klicken und zu dem Ordner navigieren , in dem Sie das Projekt erstellt haben. Wenn Sie dies aus irgendeinem Grund nicht sehen, können Sie alternativ Sie dies aus irgendeinem Grund nicht sehen, über die Menüoptionen hier zur Datei wechseln und dort den Ordner öffnen sehen. Beide sind gleich. Ich wähle also OpenFolder aus, navigiere zu dem Verzeichnis meiner Wahl und öffne das Projekt hier. Als ich jetzt Ordner öffnen auswählte, sah ich dieses Ordnerfenster, das heißt, ich navigiere es zu dem Ordner, in dem ich die React-App erstellt habe Und ich wähle diesen speziellen Ordner aus. Dies ist mein React-App-Projekt , das wir erstellt haben. Darin werden Sie einige Dateien sehen, aber Sie müssen den Stammordner auswählen. Ich sage auswählen und es wird diesen speziellen Ordner für mich öffnen. Jetzt kann ich diese Willkommensseite hier schließen, okay? Also kannst du das Projekt hier auf der linken Seite sehen , okay? Sie können den gesamten Ordner sehen. Wenn Sie diesen Bereich erweitern, werden Sie die darin enthaltenen Dateien sehen. Okay? Also, als du den Befehl Create React App ausgeführt hast, okay mit Create React App, hat er all das für dich erstellt. Sie können es auch manuell erstellen. Aber wie Sie sich vorstellen können, wird das sehr mühsam sein, oder Dieses spezielle Tool, die Create React-App, erledigt die Arbeit für Sie und richtet die gesamte Projektstruktur für Sie ein. Okay? Wir werden diese Projektstruktur bald durchgehen , aber im Moment möchte ich auch erklären, dass wir den Server vom Terminal aus betriebsbereit haben . Was ich jetzt tun kann, ist dass ich kein externes Terminal verwenden muss. Visual Studio-Code bietet eine Möglichkeit, mit der ich tatsächlich ein Terminal innerhalb von Visual Studio-Code haben kann. Auf diese Weise muss ich Visual Studio-Code nie verlassen und zu einem lokalen Terminal wechseln. Hier oben in den Optionen werde ich das Terminal hier sehen. Sie können neues Terminal sagen, und Sie können sehen, dass dies ein integriertes Terminal im Visual Studio-Code ist . Und wenn Sie PWD sagen, was das aktuelle Arbeitsverzeichnis ist, wird das Terminal automatisch in dem Ordner geöffnet , den Sie im Visual Studio-Code geöffnet haben , dem Projektordner Sie müssen also nicht auch navigieren, Sie müssen nicht den Befehl, die CD und alles ausführen und navigieren, das funktioniert einfach wie ein lokales Terminal Also hier kann ich sagen, dass NPM hier drüben anfängt. In dem Moment, in dem ich sage, dass ich eine Fehlermeldung erhalte, können Sie sehen, dass auf Port 3.000 bereits etwas läuft Und was läuft, unsere Anwendung selbst läuft und sie fragt uns, ob Sie die App stattdessen auf einem anderen Port ausführen möchten . Das möchte ich nicht tun. Ich werde nein sagen. Okay, und es wird einfach die Hinrichtung beenden. Okay? Aber ich werde diesen Server schließen, weil ich kein externes, du weißt schon, externes Terminal hier drüben mehr benutzen will. Okay? Ich möchte mich an das von Visual Studio Code bereitgestellte Terminal halten, und ich werde NPN starten, und das sollte jetzt den Entwicklungsserver für Sie ausführen Okay? Also auf diese Weise können wir das in ein neues Fenster verschieben. Also hier sind wir in dem neuen Fenster und ich habe Visual Studio-Code in dem neuen Fenster ausgeführt. Auf diese Weise muss ich Visual Studio-Code niemals verlassen. Ich kann das hier sogar so minimieren. Okay? Ich kann von hier aus sogar ein neues Terminal erstellen, sodass Sie Plus sehen können, und Sie können mehrere Terminals hier laufen lassen. Okay? Es ist sehr nützlich, und das ist der Grund dafür. Diese Art von Tools, die Visual Studio Code bietet , ist der Grund, warum er in der Entwickler-Community so beliebt ist . Jetzt zeige ich Ihnen auch die Liste der Erweiterungen, die ich habe. Also hier, wenn du zu diesem Erweiterungs-Tab auf der linken Seite gehst , hast du hier einige Optionen wie Suchen, du hast Quellcodeverwaltung, all das ausführen und debarken, okay? Ich verwende Docker auch in einigen meiner Projekte, sodass Sie Docker auch hier sehen können Aber vielleicht siehst du das nicht. Okay? Das braucht eine separate Erweiterung. Okay? Aber wenn du zur Erweiterung gehst, was sind dann Erweiterungen? Mit Erweiterungen können Sie also die Standardfunktionen , die Visual Studio-Code bereits bietet, verbessern oder erweitern . Sie können also sehen, dass ich eine Erweiterung für das Jupiter-Notebook habe. Okay. Immer wenn ich in Python codiere und Notebook-Unterstützung benötige, verwende ich diese Erweiterung. Okay. Also habe ich diese Erweiterung. Dies wird für React nicht benötigt. Ich habe eine Python-Erweiterung. Okay? Nun, dieses automatische Umbenennungs-Tag, könnte für React hilfreich sein, denn , weißt du, wenn du ein Tag umbenennst , okay, und wenn es ein schließendes Tag gibt , okay, und wenn es ein schließendes Tag gibt , wird dadurch die kostenpflichtige Version dieses bestimmten Tags umbenannt die kostenpflichtige Version dieses bestimmten Tags Okay, das ist also etwas, das du haben kannst. Es ist hilfreich. Wenn ich Ihnen zum Beispiel ein Beispiel geben muss , lassen Sie mich Ihnen ein Beispiel geben. Sagen wir also, ob ich hier eine Datei erstelle oder öffnen lasse. Okay, lass mich eine HTML-Datei öffnen. Nun, dieses Ding hier drüben, du kannst sehen, lass mich rüber gehen, nach unten scrollen. Dieser Titel hat also ein öffnendes und ein schließendes Tag. also aufgrund dieser speziellen Erweiterung das Wenn ich also aufgrund dieser speziellen Erweiterung das öffnende Tag umbenenne, können Sie sehen, dass auch das schließende Tag umbenannt wird. Okay? Das ist also der Vorteil dieses automatisch umbenannten Tags. Sie müssen nicht zuerst das öffnende Tag und dann das schließende Tag umbenennen, oder? Paarfärbung ist, Die Paarfärbung ist, wie Sie am Symbol selbst erkennen können, daran gewöhnt, dass das schließende Paar der Klammer farblich hervorgehoben Das ist nützlich, wenn Sie viele Klammern in Ihrem Okay, Debugger für Java, Dev-Container, Jango Doco verwenden viele Klammern in Ihrem Okay, Debugger für Java, , all das wird für andere Sprachen verwendet, Extension Pack für Java, Gradle für Java und Italicde. Okay? Das ist für KI-gestützte Entwicklung. Dies gilt auch für die Verwendung der Intelicode-API. Okay. Ich habe welche für Python. Also das sind alles Python-bezogen, ich scrolle runter, ein Live-Server. Wir brauchen diesen Maven nicht für Java. Das wird auch nicht benötigt. Prettier ist etwas , das du benutzen kannst. Dadurch wird der Code formatiert. Es organisiert den Code für Sie. Okay. Und ja, das haben wir, okay. Ich werde jetzt auch einige Erweiterungen hier hinzufügen. Okay? Also was Sie tun können, ist, hier nach React-Codefragmenten zu suchen, etwa so Okay. Okay, du kannst also nach ES 7 und React suchen, etwa so. Und Sie werden diese Erweiterung mit fast Millionen von Installationen sehen . Das sind also 12,9 Millionen, während ich dieses Video aufnehme. Natürlich wird das weiter zunehmen und Sie vielleicht eine andere Zahl sehen, wenn Sie sich das ansehen Das ist also eine Verlängerung. Das ist der Name ES Seven plus React Redux React Native Also, das gibt dir Vorlagen, okay? Zum Beispiel, wenn Sie eine Funktion erstellen möchten, sodass Sie RAFC sagen können Sie können das einfach eingeben und Sie erhalten die gesamte Funktionsdefinition Okay. Also diese Art von Abkürzungen hat es, die dir helfen, Zeit zu sparen. Also kannst du das installieren. Ich klicke einfach auf Installieren und füge es meiner Liste der Erweiterungen hinzu. Okay? Also ja, wir haben es jetzt installiert, okay? Sie können hier weitere React-Plugins oder -Erweiterungen auf dem Marktplatz entdecken -Erweiterungen auf dem Marktplatz und damit herumspielen. Und Sie können die Standardfunktionen erweitern , die Ihnen Visual Studio-Code bereits bietet. Ordnung. Also ja , hier geht es darum, Visual Studio-Code einzurichten, und ich hoffe, Sie fanden ihn nützlich. 5. Nahtlose APIs in React integrieren: Jetzt ist es an der Zeit, dass wir darüber sprechen, wie Sie mit EPIs in Ihrer React-Anwendung arbeiten können mit EPIs in Ihrer React-Anwendung arbeiten Nun, APIs, wie Sie wissen, steht EPI für Application Programming Interface, und es ist eine Möglichkeit für einen Remote-Server oder ein Backend dem Client die gesamte Funktionalität zur Verfügung zu stellen Okay? Und vielleicht haben Sie eine React-Anwendung im Frontend, die möglicherweise die Dienste nutzen möchte , die vom Backend-Server verfügbar gemacht werden Stimmt das? Und wenn Sie heute irgendeine Art von Anwendung entwickeln, ist die Verwendung von EPIs wirklich, wirklich üblich, okay? Ich kann mir nicht vorstellen, dass eine Anwendung in Produktionsqualität keine EPIs verbraucht Okay, APIs sind heutzutage sehr verbreitet. Und wenn Sie ein seriöser Entwickler werden möchten, ist es wichtig, dass Sie verstehen, wie Sie EPIs auf die richtige Weise in Ihrer React-Anwendung nutzen können EPIs auf die richtige Weise in Ihrer React-Anwendung Also das werden wir in einer praktischen Art und Weise behandeln , okay? Also, was wir tun werden, ist, dass ich bereits diese React-Anwendung habe, die ich mit VT erstellt habe, und ich habe eine App-GSX-Datei, in die ich meinen gesamten Code schreiben werde Es ist eine Komponentendatei, die hier in Minix gerendert wird. Sie können sehen, dass sie hier gerendert wird. In Ordnung? Also, als Erstes, um mit APIs zu arbeiten, brauchst du eine Reihe von ABIs, okay? Und zum Glück haben wir hier eine Reihe kostenloser gefälschter APIs. Okay, das kann zum Testen und Prototyping verwendet werden. Also werde ich diese Website namens snplaceholder.typod.com nutzen . In Ordnung. Und wie Sie hierher kommen, Sie können die URL direkt in den Browser eingeben oder Sie können bei Google nach GCN-Platzhalter suchen und Sie werden diesen CN-Platzhalter auf typicod.com sehen diesen CN-Platzhalter auf typicod.com In Ordnung. Wenn Sie also auf diese Website kommen, werden Sie feststellen, dass sie kostenloses gefälschtes, zuverlässiges EPS zum Testen anbietet , okay? Es listet die Sponsoren hier auf. Okay, und es gibt dir einen Überblick darüber , wie du es hier benutzen kannst Okay? Also kannst du es hier drüben sehen. Das ist der Endpunkt , den es bereitstellt. Okay? Ja, es ist ein Zwei-zu-Endpunkt, und du kannst es hier auslösen. Sie werden das S und die Antwort sehen. Okay? Du kannst es hier sehen. also Benutzer-ID, ID werden also Benutzer-ID, ID, Titel und fertig hier angezeigt. Okay? Und du kannst die API aufrufen. Okay. Lassen Sie mich eine Menge davon mögen, Sie können die API auf diese Weise aufrufen, indem die Fetch-Methode in JavaScript Beim Abrufen von JavaScript handelt es sich nicht um ein React-Konzept, sondern um JavaScript-bezogene Inhalte, tut mir leid, JavaScript-Konzept Und da React auf JavaScript basiert, können Sie Fetch in Ihrem Code verwenden Wenn Sie dieses Skript ausführen, gibt Fetch im Grunde ein Versprechen zurück, und dann nutzen wir es, dann werden diese dann hier drüben angeordnet Wartet dann, bis es fertig ist. Dann bekommst du die Antwort hier drüben und sie wird ausgeführt. Was also passiert, ist, dass die Antwort hier berücksichtigt und in JSN umgewandelt wird. Nachdem dieser Vorgang abgeschlossen ist, die JCN auf der Konsole gesperrt Okay? Wenn du dieses Skript ausführst, wirst du sehen, dass das die Ausgaben sind, die du bekommst, oder? Es ist im Browser gebaut. Es erlaubt dir, hierher zu fahren. Und es gibt viele Endpunkte, die es bietet. Okay, Sie können Slash Post sehen. Ich gebe dir 100 Beiträge, also kannst du hier rüber gehen. Sie können 100 Beiträge sehen, die es Ihnen zur Verfügung stellt. Wenn Sie also viele Daten benötigen, können Sie diese Kommentare, Alben und Fotos abfragen . Sie erhalten 5.000 Fotos, Aufgaben , Benutzer und alles Okay? Also ja, diese APIs können Sie verwenden. Es gibt Unmengen von Dingen. Wenn Sie eine GET-Anfrage stellen möchten, sind dies zehn Punkte. Wenn Sie eine Post-Anfrage stellen möchten, gibt es hier einige Endpunkte. Patch-Anfragen, Anfrage auch löschen. Nun, wenn Sie sich mit EPIs und ihrer Funktionsweise auskennen, werden Sie wissen, dass EPIs verschiedene Typen gibt wie Get, Post, Put, Patch, Delete, oder Also, ja, das ist ungefähr dieser Inhaber vom Typ JCN. Entschuldigung, JCNPlaceHlder. In Ordnung Alles, was du tun kannst, ist, dass wir das hier drüben nutzen werden. Okay? Um zu unserer Anwendung hier zu kommen, habe ich ein sehr einfaches Komponenten-Setup. Okay? Es gibt nur einen einfachen Jex zurück , der nur den Header hat Okay? Also was wir tun werden, ist, wir werden diese Daten bekommen. Okay, also ich kopiere das einfach hier drüben. Okay, sofort. Und ich werde das sofort hier in meine Komponente einfügen, aber ich werde es nicht Okay. Ich werde Use Effect Hook hier benutzen. Weil es eine Nebenwirkung gibt, oder? Und wie nutzen wir Use Effect? Also Hoppla, tauche einfach auf. Okay, also wie nutzen wir den Use-Effekt? Zuallererst habe ich eine Funktion, o. Und hier ist das eine Funktion, die mit der Logik aufgerufen wird. Okay. Und dann habe ich ein Komma mit der Abhängigkeit Also, welche Abhängigkeit ich hinzufügen möchte , ich kann sie hier hinzufügen. Okay. Das ist erledigt. Okay. Das ist eine Pfeilfunktion, also braucht sie einen Pfeil. Alles klar. Das ist eine Syntax, die ich verwenden werde, okay? Jetzt möchte ich diese Operation durchführen. Die Operation wird also in diesen geschweiften Klammern stehen, also werde ich sie hier beenden und den Abruf-Code hier einfügen. Okay? Okay, du kannst das mit einem Semikolon beenden, wenn du willst, Okay, ich zoome einfach heraus, sodass es hier auf einem einzigen Bildschirm sichtbar ist einem einzigen Bildschirm sichtbar Okay? Nun, eine Sache, die man hier beachten sollte, ich übergebe hier einen leeren Abhängigkeitsbereich , weil ich möchte, dass dieser Use-Effect-Hook oder dieser Code auf dem ersten Mount oder auf der Menge der Komponente ausgeführt wird, beim ersten Rendern und nicht danach. die Regeln für den Use-Effekt betrifft, so Sie hier ein leeres Abhängigkeits-Array übergeben, wenn Sie möchten, dass eine bestimmte Logik auf dem Komponenten-Mount ausgeführt wird. Okay? Also, was das macht, ist, dass es das holt Es führt einen Abruf-Aufruf an diesen bestimmten Endpunkt durch. Es erhält die Antwort und wandelt sie hier in eine JCN um, und dann sperrt es die JCN mit diesem Ding auf die Konsole Okay? Also gleich, was ich tun werde, ist, Console hier drüben zu öffnen Okay. Und ich gebe Ihnen hier einen Haftungsausschluss, dass dieses Ding zweimal auf der Konsole gedruckt wird. Warum? Weil wir hier im strikten Modus arbeiten. Okay, Mint ch Sex. Sie können den strikten Modus sehen. Wenn Sie die Ausgabe nur einmal auf dem Component Mound sehen möchten, müssen Sie den strikten Modus von dort entfernen Ordnung. Also werde ich das speichern. Sobald Sie speichern, sehen Sie diese Ausgabe auf der Konsole. Ordnung. Du kannst es sehen. Und Sie können es erweitern, wie Sie sehen werden, verwenden Sie ID. Äh, Ausweistitel hier drüben und fertig. In Ordnung. Also das funktioniert absolut einwandfrei, und so können Sie die Daten abrufen und auf der Konsole anzeigen. Alles klar? Nun, das Anzeigen von Daten auf der Konsole ist natürlich nicht das Ziel, aber das Ziel hier ist zu sehen, wie Sie Fetch verwenden können , um PA-Aufrufe zu tätigen Okay, jetzt haben wir die Daten in unserer React-Anwendung, aber wir protokollieren sie gerade in unserer Konsole Nun, von hier aus, diesem Teil des Codes, können wir diese Daten überall hin mitnehmen, oder? Wir können diese Daten überall hin mitnehmen, heißt, wenn ich will, kann ich diese Daten auch aktualisieren oder in einen Zustand versetzen. Okay? Und lass uns das machen. Okay? Also was ich tun werde, ist , hier drüben einen Staat zu haben. Ich sage Daten. Ich werde hier Daten gesetzt haben, etwa so, ich sage hier use state und ich werde hier ein MTRA als Initialisierung haben Ich habe also diesen Datenstatus. Jetzt kann ich dieses JCN hier drüben haben, richtig, als Eingabe Anstatt es also auf der Konsole zu protokollieren, würde ich sagen wollen, dass ich statt Konsolen-Log-JCN sagen würde , Daten setzen, und ich gebe diese JCN So wie das. Okay? Und das ist erledigt. Okay? Wenn ich das speichere, die Daten nicht auf der Konsole protokolliert, wenn ich sie aktualisiere. Daten sind nicht auf der Konsole gesperrt, aber sie werden jetzt auf den aktuellen Status aktualisiert. Alles klar? Es ist jetzt auf den neuesten Stand gebracht. Aber wir verwenden den Status nicht oder zeigen ihn irgendwo an, oder? Sie können also auch die Abruf-Daten anzeigen , oder? Also, was ich tun werde, ist , hierher zu kommen und uns eine ungeordnete Also, da wir hier eine Werteliste bekommen. Also, wenn Sie die Daten sehen, ob ich hier einen Anruf tätige oder wir die Daten hier haben, richtig? Das sind die Daten. So wird es uns zugeschickt. So können wir die Benutzer-ID, die ID und den Titel anzeigen und vervollständigen. Also, was ich tun werde, ist, eine ungeordnete Liste hier drüben zu haben. Ich werde ein Jar-Skript verwenden. Okay, ich sage Datenpunktkarte. Nun, da wir Array verwenden, okay, ich sage Datenpunktkarte. Nun, hier in der Map würden wir sagen, dass wir das hier machen sollen, denn das ist es, was wir holen Okay, wir holen das, was erledigt werden muss. Okay. Also haben wir hier im Moment nur ein Objekt. Okay? Wir werden es später aktualisieren um auch eine Liste von Objekten zu erhalten. Okay, also mach dir darüber keine Sorgen. Okay. Ich würde sogar sagen, da wir nur ein Objekt bekommen, brauchen wir nicht einmal eine Karte. Okay? Also was wir tun können, ist, mich das entfernen zu lassen. Okay? Ich würde sagen, wir brauchen nicht mal eine Karte. Ich würde es einfach so anzeigen. Okay? Also sage ich, Daten sind straff, und was ist das Eigentum Eigentum ist Titel, richtig? Wir haben einen Eigentumstitel, also sage ich Titel, ungefähr so. Okay. Ups, das wird also in dem Paar lockiger Zahnspangen sein Sie können sehen, dass dies der Titel ist , den wir von der API erhalten Du kannst sehen. Okay, das sind die Daten, die wir bekommen, richtig? Sie können die ID anzeigen, die Benutzer-ID ist auch vollständig. Okay? Also kannst du die ID hier drüben anzeigen. Okay. Ich kann auch die Benutzer-ID anzeigen, so etwas. Okay. Benutzer-ID. Okay. Sie können sehen, dass ID eins ist, Benutzer-ID ist eins. Okay. Und du kannst hier auch irgendeinen Text haben , Benutzer-ID. In Ordnung, also, okay, nein, das ist ID. Also, das ist kurz gesagt Ausweis. Um ID zu machen. Okay. Und das ist die Benutzer-ID. Also werde ich eine Benutzer-ID haben, ungefähr so. Und das ist der Titel Okay, so etwas, und du kannst die Daten sehen, oder? Und fertig oder nicht, das kannst du auch hier haben. Okay? So fertig oder nicht , dass du es auch anzeigen kannst. Okay, es liegt ganz bei dir, aber wir brauchen keine Karte, weil wir hier keine Liste bekommen. Okay? Also das ist für einen einzelnen Artikelsatz hier drüben. Also sagen wir morgen morgen. Also hier, ich scrolle nach unten. Hier bekommen wir die Liste der Todos. Du siehst, wir bekommen die Liste der Todos. Also dieselbe Logik kannst du hier drüben in To-Do umwandeln, oder? Das kannst du machen, okay? Oder lassen Sie uns das ändern, um auch zu posten. Sie können es ändern, um zu posten, wenn Sie möchten. Okay? Also, was ich tun werde, ist , den Endpunkt zu nehmen. Beitrag. Okay? Ich füge es hier hinzu. Okay. Und ich werde diesen Endpunkt durch diesen ersetzen, etwa so. Ich werde das entfernen. Okay. Das ist ziemlich einfach. Und jetzt werde ich eine Datenpunktkarte haben , denn jetzt bekommen wir die Liste der Informationen, richtig? Also werde ich diese Karte haben. Okay? Also, bevor ich die Karte hinzufüge, werde ich zunächst eine ungeordnete Liste haben Dann sage ich hier Datenkarte. Okay. Und hier sage ich Post. Für jeden Beitrag, okay, ich muss etwas tun. Okay? Was werde ich tun? Das werde ich hier definieren, okay? Für jeden Beitrag werde ich hier eine Liste haben, okay? Und die Liste wird einen Schlüssel haben. Okay? Also, was wird der Schlüssel sein? Was sollte der Wert des Schlüssels sein? Also sollte es ID sein. Ich werde eine eindeutige Kennung für den Schlüssel haben. Okay? Also ich kann hier Post Dot ID sagen. Okay. Dann hier drüben, nach LI, nehme ich P-Tag oder H-Two-Tag, je nachdem, wie Sie es anzeigen möchten. Ich sage Post Dot-Titel, ungefähr so. Okay. Und dann, äh, lass mich sehen, Titel ist eins und Körper ist eins. Ich sage Titel und dann P, und dann hast du, äh, Nachrichtentext. Du kannst also Post Body sagen, so etwas in der Art. Okay? Das ist erledigt. Okay, jetzt bekommst du den Fehler. Wenn Sie also den Fehler sehen, glaube ich zu wissen, was der Fehler ist. Es ist wahrscheinlich so, dass es funktionieren muss, oder Sie können sehen, dass die Datenpunktkarte keine Funktion ist. Okay? Verstanden. Also hier stellen wir das als Array ein. Okay? Also werden wir das entfernen und ich setze es hier auf Null. Okay. Und lassen Sie uns sehen, ob der Fehler behoben ist. Okay, der Fehler geht nicht. Okay, ich habe also ein Problem herausgefunden. Das Problem bestand darin, dies auf Null zu setzen. Okay? Also war es richtig , es auf ein leeres Array zu setzen. Okay? Ich weiß nicht, warum ich bei einer Hard-Refresh den Fehler bekommen habe, der Fehler ist weg. Okay? Also der Code stimmt. Ich hatte dieses leere Array anfangs richtig platziert, okay, weil wir es als Array haben wollen , weil wir hier die Map verwenden, oder? Und Map ist nur eine Methode für Arrays, okay? Es funktioniert mit Arrays Wenn Sie jetzt nach einer Aktualisierung sehen, und wenn ich hier drüben sehe, können Sie den Hauptteil und den Titel des Beitrags sehen, Sie können sehen, wie er hier angezeigt wurde Okay. Wenn Sie möchten, können Sie den Hauptteil des Beitrags mithilfe des Bowl-Tags anzeigen. Du kannst B hier drüben haben. Okay? Oder du kannst sogar stark sein, okay? Also sage ich stark. Okay. Und ich füge einfach den Titel in den Strong ein und du kannst den Titel und die Pose hier sehen. Okay. Also holen wir uns tatsächlich 200 Posen Okay, denn das ist es, was diese API sagt. Okay, wenn du hier drüben nachsiehst, gibt es, tut mir leid, 100 Posen, nicht 200 Beiträge Es gibt 100 Posen und wir zeigen hier 100 Posen an. Okay? Benutze den Fetch Fetch von JavaScript. Okay? Das funktioniert also so, dass dieser Use-Effect-Codeblock auf der ersten Komponentenhalterung ausgeführt wird. Warum wird er auf der ersten Komponentenhalterung ausgeführt? Wegen dieses Abhängigkeits-Arrays? Wenn das Abhängigkeitsarray leer ist, okay, der Codeblock, den Sie hier haben, wird gemäß den Regeln Codeblock, den Sie hier haben, wird einmal auf dem Komponenten-Mount ausgeführt. Was nun beim Komponenten-Mount passiert, Sie verwenden Fetch Sie rufen diesen Endpunkt hier auf und dann haben Sie ein Set Ihnen wird ein Versprechen gegeben, und dann nutzen Sie es hier drüben , um die Antwort in Jason zu erhalten, und dann verwenden Sie die Antwort, um Daten festzulegen. Okay? Was sind festgelegte Daten? Bei Datensätzen handelt es sich um festgelegte Daten Sie können die Daten hier einstellen, was nichts anderes ist als der Zustand hier drüben. Es handelt sich also um eine Reihe von Funktionen. Okay? Dann haben Sie Daten mit diesen Daten, die Sie vom Server erhalten. Was machst du jetzt? Sie können die Karte hier verwenden, um die Daten auf diese Weise anzuzeigen. Okay, wir wiederholen es und wir zeigen es Wenn wir hier nur einen Beitrag bekommen, wenn du nur einen Beitrag bekommst und nicht die Liste der Beiträge, dann brauchst du keine Map weil du nicht über die Daten iterieren musst, Ich hoffe, das macht Sinn, okay? Hier kommen also alle Javascript-React-Konzepte zusammen. Okay, also wie viele Konzepte verwenden wir? Wir verwenden die Use-Effect-Hooks, wir verwenden das Hook-Konzept. Du benutzt Staaten hier drüben. Sie verwenden Fetch from JavaScript. Du machst hier von Versprechungen Gebrauch. Und dann nutzen Sie hier die Kartenfunktion mit Arrays und zeigen die Daten Du benutzt auch ihr Geschlecht. In Ordnung? Also können Sie sehen, wie das die Daten von einem Remote-Server rendert. Und ich hoffe, Sie konnten dem folgen, und ich hoffe, das war nützlich. 6. Lastzustände und Fehlerbehandlung effizient verwalten: Hallo, da. Wir sprechen also darüber, wie Sie mit APIs in React arbeiten können? , die Dabei haben wir eine sehr einfache Komponente erstellt , die diese API aufruft, um die Liste der Beiträge abzurufen, und wir zeigen die Daten hier in der Komponente an. Okay? Und das ist der Output, den wir bis jetzt bekommen haben. Und wenn du das im Vollbildmodus sehen willst, dann ist das unser EPI, und so sieht die Ausgabe jetzt aus, okay? Du siehst alle Beiträge. Okay. Mach dir keine Sorgen. Dies ist dieser Beitrag oder in einer anderen Sprache. Okay? Vielleicht lass mich übersetzen, wenn ich das übersetze, da steht, dass es auf Latein ist. Okay. Absolut okay. Wir wollen nur ein paar Dummy-Daten, mit denen wir arbeiten können, oder? Es spielt keine Rolle , welche Sprache. Okay. Also ja, das ist Post. Jetzt zeigen wir die Daten an. Nun, was passieren kann, ist, dass Sie, wann immer Sie mit EPIs arbeiten , einen Remote-Serveraufruf tätigen, okay? Sie tätigen einen Fernanruf zu etwas, richtig? Und es wird ein Szenario in dem die Daten, die Sie erhalten, etwas Zeit in Anspruch nehmen. Es ist also eine gute Praxis , eine Schnittstelle zu verwenden oder eine Schnittstelle zu haben, über die Sie dem Benutzer mitteilen , dass die Daten abgerufen werden , und diesen Zustand können wir als Ladezustand bezeichnen , oder? Wie würden Sie also mit dem Ladestatus umgehen wenn Sie Daten von einem Remote-Server abrufen? Daten von einem Remote-Server abrufen Außerdem war dies das erste Szenario in dem Sie mit einem Ladestatus umgehen möchten zweite Szenario ist, dass Sie vielleicht mit jeder Art von Fehlersituationen umgehen möchten , okay? Nun, ein Fehler könnte ein Tippfehler in der URL sein oder die Daten wurden abgerufen, aber wenn Sie sie in JSN konvertieren, erhalten Sie dort eine Fehlermeldung, okay, weil die empfangenen Daten nicht im richtigen Format sind erhalten Sie dort eine Fehlermeldung, okay, weil die empfangenen Daten nicht im richtigen Wie würden Sie in diesem Fall mit Fehlern umgehen und sie verwalten? Okay, darüber werden wir sprechen. Wir sprechen also über zwei Dinge, über den Umgang mit dem Ladestatus und die Verwaltung der Fehler bei der Arbeit mit APIs, okay? Lassen Sie uns zunächst über den Ladestatus sprechen. Okay? Für den Ladestatus können wir also tatsächlich eine benutzerdefinierte Benutzeroberfläche oder eine andere G 6 verwenden, die wir zurückgeben, wenn der Status geladen wird. Okay? Also was ich tun werde, ist, zuerst einen Staat hier drüben zu haben. Ich sage Laden. Okay, und ich sage, hier wird das Gerät geladen. Okay, und ich sage „ Status verwenden“, ungefähr so. Okay. Und ich nehme das. Okay. Also kannst du haben, dass das ein boolescher Wert ist Das ist ein boolescher Zustand hier drüben, okay? Der Staat hat boolesche Daten. True bedeutet also, dass gerade Daten geladen werden, und falsch bedeutet, dass es derzeit nicht geladen Okay? Also werde ich das auf False initialisieren lassen, sagen wir hier drüben. Okay. Nun, was wir tun würden, ist, wenn der Status wahr ist, was wir tun können, ist, dass wir diese Schnittstelle nicht zeigen wollen. Okay? Denn wenn die Daten geladen werden, was ist da in dieser Schnittstelle, es sind die Post-Daten, die wir vom Server bekommen. Wenn die Daten noch nicht abgerufen wurden und sich im Ladezustand befinden, sollten wir sie nicht anzeigen Stattdessen benötigen wir eine andere Art von Benutzeroberfläche, in der wir dem Benutzer mitteilen müssen dass hey, die Daten werden geladen Okay? Also, was Sie tun können, ist, Ihre Aussage hier drüben zu haben. Sie können sagen ob, und ich sage, ob geladen wird. Okay, also wenn das Laden wahr ist, kehre ich zurück. Sie können hier also mehrere Rücksendeerklärungen haben. Okay. Also hier gibst du etwas JSX zurück, aber wenn das Laden stimmt, gibst du hier eine andere J six zurück und was geben wir zurück Wir geben hier ein einfaches P-Tag zurück. Okay, also füge ich einfach ein P-Tag und sage Laden, so etwas in der Art. Ganz einfach. Okay, es ist nur ein Text. Ich mache mir keine Gedanken darüber, eine komplexe Oberfläche zu erstellen, aber Sie können hier auch eine komplexe Sache definieren . Das ist es, was es bedeutet Okay? Also hier, das wird nicht wiedergegeben, weil der Staat falsch ist, oder? Sobald ich den Status auf „Wahr“ ändere und diesen Wert speichere, wird der Ladevorgang angezeigt . Stimmt das? Wird geladen bedeutet, dass dies noch geladen wird und die Daten noch nicht abgerufen wurden Okay? Also das wird der Benutzer sehen , wenn die Daten abgerufen werden, richtig Und wir ändern das manuell falsch und falsch in wahr, oder? Und wir schauen, ob es gut funktioniert. Okay? Also hier werden keinerlei Fehler angezeigt, das ist absolut gültig. Sie können mehrere Rücksendungen haben, diese sollten jedoch an Bedingungen geknüpft sein. Als ob das bedingt wäre, oder? Sie können nicht einfach eine Rückmeldung hier haben. Okay, es ist doch eine Funktion, oder? Das wird unerreichbar, weil du hierher zurückkehrst, oder? Es macht also keinen Sinn, weil das hier Ja-Skriptfunktionen sind , sonst nichts, oder? Sie können also diese Art von Rendite haben. Du kannst sagen, wenn es geladen wird, dann gib es zurück, okay? Was ich jetzt tun muss, ist, wenn die Daten abgerufen werden, den Wert für das Laden des Zustands für das Laden hier festlegen . Okay? Also, was ich tun werde, ist zunächst zu sagen, dass der Staat falsch ist, okay. Und innerhalb dieses Nutzungseffekts hier drüben. Und wenn die Daten abgerufen werden, okay? Ich würde sagen, Set wird geladen. Okay? Also wenn wir die Daten hier einstellen. Wenn das Laden also anfänglich innerhalb dieses Nutzungseffekts beginnt, kann ich sagen, dass das Laden auf den Wert true gesetzt wird. Etwas in der Art. Okay. Und dann, sobald die Daten hier abgerufen wurden. Also, wenn die Satzdaten hier aufgerufen werden, wenn das Laden abgeschlossen ist, dann können wir das in Cibras hinzufügen, weil wir jetzt mehr als eine Anweisung hinzufügen und hier kann ich sagen, dass das Laden von Sets deaktiviert ist, kann ich sagen, dass das Laden von Sets das von fällt, weil das Laden fertig ist Okay. So können Sie also das Laden verwalten. Wenn Sie das jetzt speichern und aktualisieren, werden Sie sehen, dass der Ladevorgang angezeigt wird wenn der EPA-Anruf stattfindet. Sie können sehen, Sie können sehen. Es dauert kaum eine Sekunde , weil die EPA natürlich schnell ist. Okay. Aber wenn die API etwas Zeit in Anspruch nimmt, wird sie natürlich für eine Weile da sein. Also, was machen wir? Wir verwalten den Ladestatus mit Hilfe eines Bundesstaates hier drüben, okay? Wir zeigen den Ladevorgang mit Hilfe eines Zustands an. Wir haben den Ladestatus mit dem Standardwert Falls definiert, und dann haben wir diese Benutzeroberfläche, die, wenn das Laden wahr ist, diesen JSX zurückgeben, okay? Sie können das nach Belieben ändern. Sie können dafür benutzerdefiniertes CSS definieren lassen. Es ist ganz deine Wahl. Aber wie wird das angezeigt und versteckt? Zuerst im Use-Effect-Hook setzen wir als Erstes das Laden auf true. Und dann setzen wir das Laden auf „fällt“. Wenn Sie jetzt verpassen die Daten abgerufen wurden und sie im Status aktualisiert wurden, setzen wir den Ladevorgang auf Fols, sodass die Daten angezeigt werden Fols, sodass die Daten angezeigt Falls Sie diesen Schritt aus irgendeinem Grund verpassen, ist es richtig, das Laden auf „Falten“ zu setzen, das Laden auf „Falten“ zu setzen, damit es beim Laden einfach hängen bleibt Auch wenn die Daten hier drüben in den Staat hier drüben übertragen werden, okay? Du aktualisierst nicht den Zustand, den du ursprünglich hattest . Ich muss das aktualisieren. Und in dem Moment, in dem ich aktualisiere, werden Sie sehen, dass die Daten abgerufen werden Und das gibt Ihnen einen schönen Hinweis für den Benutzer, dass Daten geladen werden , falls der EPI Zeit benötigt So können Sie also den Ladestatus verwalten , wenn Sie mit API-Aufrufen arbeiten Okay? Jetzt kommt der zweite Teil, der die Fehlerbehandlung ist. Okay? Nun zur Fehlerbehandlung, es ist offensichtlich, dass Fehler passieren können, wenn Sie mit EPIs arbeiten , oder? Also, was ich tun werde, ist, hier drüben noch einen Staat zu haben. Ich sage const, ich sage error und ich sage set error, und ich sage use State auf Null. Okay. Der Fehler ist also zunächst Null. Es ist ein Zustand, den ich hier erschaffe. Okay? Wie ich es für das Laden von Daten und Fehlern angegeben habe. In Ordnung. Und was ich tun werde, ist hier, ich habe das dann, das ist der DN, der ausgeführt wird , sobald die Daten in der JSN-Form empfangen wurden Okay, ich kann hier noch einen Schritt hinzufügen . Ich kann fangen sagen. Okay. Du kannst hier fangen sagen, und ich kann Fehler sagen, fang den Fehler, und du kannst den Fehler hier tatsächlich beheben. Okay? Also ich kann Console Dot sagen. Loggen Sie sich zuerst hier ein. Ich kann den Fehler protokollieren. Ich kann sagen, äh, okay. Lassen Sie mich die Vorlagen verwenden. Okay, also ich sage Fehler beim Abrufen der Daten. Okay. Und ich kann die Fehlerinformationen einfach hier haben. Weitergereicht zu werden. Okay, das ist erledigt. Okay, ich habe das Semikolon verpasst, also füge ich hier ein Semikolon hinzu Okay. Ich zoome einfach ein bisschen heraus. Das ist also in der Einzelansicht sichtbar. Also habe ich diesen Console Dot Error. Dann kann ich sagen, Fehler einstellen. Okay, Fehler setzen und ich kann den Fehler hier aktualisieren. Ich kann die Fehlerinformationen im Feld aktualisieren, um die Daten abzurufen Das ist also die Botschaft, die Sie dem Benutzer präsentieren möchten Ich stelle das ein, okay? Und ich sage, das Laden auf das von Stürzen einstellen, okay? Sie müssen hier auch den Ladevorgang auf Fallover aktualisieren , da Sie den Ladevorgang zunächst auf true gesetzt haben. Direkt im Nutzungseffekt. Okay? Sobald die Daten geladen sind, stellst du sie auf Stürze, und sobald irgendein Fehler auftritt, stellst du das Laden auf Stürze weil der Ladevorgang abgeschlossen ist, oder? Sie müssen also den Status aktualisieren. Okay? Und wir müssen den Fehler dem Benutzer anzeigen. Wenn du willst, kannst du es anzeigen. Also, was ich tun werde, ist, wenn etwas Ähnliches hinzugefügt wird. Ich kann hier sagen, ob ein Fehler vorliegt. Ich werde den Fehler anzeigen. Ich werde den Fehler einfach anzeigen. Ich kann Fehler sagen, so oder so. Okay? Also, wenn du aktualisierst, wirst du hier keine Fehlermeldung bekommen, okay? Aber was Sie tun können, ist , wir können ein benutzerdefiniertes Fehlerobjekt erstellen und Sie können das Fehlerobjekt tatsächlich auslösen und wir können sehen, wie der Fehler passiert. Das können Sie hier tun. Okay. Sobald die Daten hier abgerufen wurden, können Sie einen neuen Fehler sagen oder Sie können sagen , einen neuen Fehler auslösen. Sie müssen den Fehler auslösen, einen neuen Fehler auslösen. Okay. Nehmen wir an, Sie haben diesen Fehler beim Übergeben der GSN Du kannst also sagen, Ups. Also das wird rauskommen Man kann sagen, dass etwas schief gelaufen ist. Etwas ist schief gelaufen, so etwas , und du kannst das speichern. Sie können sehen, dass Daten nicht abgerufen werden konnten, oder? Weil wir hier manuell einen benutzerdefinierten Fehler ausgeben, in Ordnung, um die Fehlersituation zu simulieren. In Ordnung. Und wenn Sie zur Konsole kommen, sollten Sie sehen, dass ein Fehler angezeigt wird. Auf dieser Folie ist ein Fehler beim Abrufen von Daten zu sehen . Etwas ist schief gelaufen Okay? Sie können die Nachricht auch sehen. Okay? Jetzt machst du Console Dot Log. Sie können einen Konsolen-Punktfehler machen. Das ist eine gute Praxis hier. Wenn es darum geht, Fehler zu protokollieren. Wenn Sie jetzt aktualisieren, wird die Option „Redo it“ rot angezeigt Stimmt das? Also so funktioniert es, und es wird zweimal geworfen, weil wir natürlich streng sind. Also ja, so kannst du den Fehler hier beheben. Okay? Ich hoffe, das ist klar und es gibt Ihnen einen guten Hinweis darauf wie Sie benutzerfreundliche Anwendungen erstellen können , weil Dinge wie EPI Zeit zum Laden braucht oder die Antworten Zeit brauchen, Dinge wie EPI Zeit zum Laden braucht oder die Antworten Zeit um gerendert zu werden oder es treten irgendwelche Fehler auf. Das sind alles normale Situationen. Dies sind alles H-Fälle , die passieren können. Und wenn Sie dynamische Anwendungen entwickeln, die APIs nutzen, ist es natürlich dynamische Anwendungen wichtig, dass Sie wissen, wie Sie damit umgehen können. Alles klar? Ich hoffe, das ist nützlich und ich hoffe, dass Sie dadurch einige gute Kenntnisse darüber erhalten , wie Sie mit APIs arbeiten können. Also, ja, das war es auch schon. Ich werde dich bald sehen. 7. API-Aufrufe in React mit Axios vereinfachen: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen, über Axis zu sprechen. Nun, was ist Axis? Axis ist ein HTTP-Client , der Promise-basiert für JavaScript ist. Okay? Wenn ich jetzt JavaScript sage, bedeutet das, dass es auf Browser, Nodejs, React und all dem läuft . Alles klar? Nun, das ist die offizielle Website von axisxshttb.com, und Sie können Eine einfache Google-Such-Axis-Bibliothek oder wo auch immer, wie bei Google oder einer anderen bevorzugten Suchmaschine Ihrer Wahl. Sie werden diesen ersten Link hier oben sehen, nämlich das Axis HTDP-Doc Intro das Okay, das ist also die URR hier drüben. Wenn Sie auf diese Website kommen, werden Sie einige Details darüber sehen, was Axis ist Und auf der rechten Seite sehen Sie einen Code , der zeigt, wie Axis funktioniert. Es ist eine einfache Abrufanforderung , die gerade ausgeführt wird. Stimmt das? Nun, axis und fetch, beide sind die beliebtesten Methoden, um HTDP-Anfragen in JavaScript zu Es gibt jedoch einige Gründe , warum Access verwendet wird. Der Zugang ist einfach. Es hat ein Konzept von Abfangjägern, okay? Interzeptoren bedeuten also, wenn zum Beispiel für jeden API-Aufruf in Ihrer Anwendung auch ein OT-Token oder irgendeine Art von Headern erforderlich ist, die über alle API-Aufrufe hinweg konsistent sind, dann können Sie das Konzept von Interzeptoren verwenden, bei dem Sie diese das Konzept von Interzeptoren gemeinsamen Header zentral verwalten können auch ein OT-Token oder irgendeine Art von Headern erforderlich ist, die über alle API-Aufrufe hinweg konsistent sind, dann können Sie das Konzept von Interzeptoren verwenden, bei dem Sie diese gemeinsamen Header zentral verwalten können. Das sind Interzeptoren, okay? Also ja, Access ist auch bei Fetch sehr beliebt. Fetch ist also eine integrierte Methode, API-Aufrufe auszuführen. Access ist eine Bibliothek. Okay, du kommst also hierher auf diese Seite. Wenn Sie „Erste Schritte“ sagen, werden Sie auf diese Seite weitergeleitet, auf der Sie einige Funktionen von Axis sehen können. Sie können sehen, dass es eine Möglichkeit bietet, Anfragen und Antworten mithilfe von Interzeptoren abzufangen Sie können all diese Arten von Unterstützungen zur versprochenen API machen . Ich kann Anfrage - und Antwortdaten transformieren. Sie können die Anfrage auch stornieren. Es gibt Timeouts. Okay? Es bietet also etwas mehr Flexibilität im Vergleich zu Fetch hier. Okay? Sie können sehen, wie Bandbreitenlimits für Node Chair festgelegt werden. Automatische JSN-Behandlung in der Antwort, okay, HTML-Formulare als JASN posten alles. Nun, das ist standardmäßig nicht verfügbar. Sie müssen dieses Paket installieren. NPM hat Axis installiert. Okay? Wenn du BR benutzt, kannst du das nutzen. Also für NPM ist das ein Befehl für BoA, das ist ein Befehl, und für Yarn ist das ein Befehl, okay? Es gibt andere Möglichkeiten, es mit diesen Script-Tags hier zu verwenden Okay? Wenn Sie sich nun das Beispiel hier auf der linken Seite ansehen, wenn Sie auf diese Beispielschaltfläche klicken, werden Sie sehen, wie Sie es verwenden können. Okay? Sie können sehen, das ist der Code, um eine GET-Anfrage zu stellen und die Antwort zu bearbeiten , den Fehler abzufangen und schließlich auch zu haben. Okay, final wird immer ausgeführt, unabhängig davon , ob die Anfrage erfolgreich war oder nicht. Okay. Also das ist eine Demonstration hier drüben. Wir werden hier ein praktisches Beispiel für Axis ausprobieren und sehen, wie wir es in unserem Projekt verwenden können . Alles klar? Ich habe hier ein einfaches Projekt, okay, bei dem, was ich mache, ist, dass ich hier tatsächlich einen API-Aufruf mit Fetch Okay, ich gebe einen benutzerdefinierten Fehler aus, den ich deaktivieren werde. Also, wenn es keinen Fehler gibt, wirst du sehen, okay, also ich sehe hier immer noch einen Fehler. Also habe ich einen Hard Refresh und es hat tatsächlich funktioniert, okay? Also habe ich den benutzerdefinierten Fehler, den ich generiert habe, kommentiert , und das ist die Ausgabe. Sie können den Ladestatus also hier sehen , okay, wird geladen. Und wir kümmern uns hier um das Laden und die Fehler. Wenn es irgendeinen Fehler gibt, zeigen wir ihn an. Und wir verwalten all diese drei Datenladungen und Fehler mit Hilfe von Status, und wir verwenden hier Fetch, okay? Lassen Sie uns nun dieses Ding, ich würde sagen, in Axis transformieren ich würde sagen, in Axis Jetzt brauchen wir als Erstes Zugang zu einem Terminal, also gehen Sie rüber zum Terminal hier drüben. Okay. Dadurch erhalten Sie ein Terminal im aktuellen Arbeitsverzeichnis. Sie können also PWD eingeben und sehen, wo Sie sich befinden. Ich bin tatsächlich in meinem Projekt hier drüben. Okay. Ich sage klar. Und jetzt könnten Sie diesen Befehl hier sehen, wo es hieß: So könnten Sie Axis installieren. Ich kopiere diesen Befehl einfach , weil ich NPM verwende Und ich werde das hier rüberführen. Okay. Nun, das wird NPS hinzufügen Entschuldigung, dadurch wird meiner Bewerbung hier eine Achse hinzugefügt. Okay? Also wurde es erfolgreich hinzugefügt. Okay. Und was ich tun würde, ist, dass Sie das bestätigen können, indem zu Paket Punkt hasN hier drüben gehen, und ich werde dieses Terminal hier testen. Sie können sehen, dass die Achse als Abhängigkeit hinzugefügt wurde, okay? Also ja, das wurde getan und Axis ist jetzt für uns verfügbar. Nun, das Erste, wenn Sie Axis verwenden, müssen Sie es auch importieren. Also füge ich oben eine Importanweisung hinzu. Ich sage Achse importieren und es wird hier automatisch vorgeschlagen und automatisch vervollständigt Okay? Also holen wir uns diese Achsen-Instanz hier drüben. Nun, was wir tun müssen, ist, anstatt es abzurufen, wir werden das in eine Achse umwandeln, oder? Also anstatt hier drüben zu holen, okay? Ich sage Achse. Tot, komm her. Okay? Das ist was es ist. Okay? Ich sage dann Antwort. Und wenn das Beste da ist, konvertieren wir die Antwort in JCN Mit Axis müssen Sie das nicht tun. Okay, Sie erhalten die Antwort als JSN selbst. Wenn Sie also hierher kommen, werden Sie in der Antwort eine der Funktionen zur automatischen JCN-Datenverarbeitung sehen der Funktionen zur automatischen JCN-Datenverarbeitung , oder? Also das ist eine gute Sache. Also hier, dieser eine Schritt wird verschwinden, okay? Das wird hier verschwinden. Hier statt Chasin können wir diese beiden Antworten einfach hier umbenennen Ich könnte Antwort sagen, ungefähr so. Ich würde sagen, Daten festlegen. Festgelegte Daten sind Antwort. Nun, diese Antwort hat tatsächlich dass diese Antwort ein Objekt ist und dass sie ein Datenattribut hat. Sie müssen auf diese Weise darauf zugreifen, Antwortpunktdaten. Okay? Und Sie können tatsächlich auch ein Konsolenprotokoll für die Antwort erstellen und sehen, was es ausgibt. Ich mache das einfach. Konsolenprotokoll und Antwort hier. Okay. Wir werden in Kürze die Konsolenprotokolle überprüfen, okay? Aber so funktioniert es und Sie können Ladefalten festlegen. Sie haben einen Haken, bei dem Sie den Fehler finden, und der Rest ist hier gleich, okay? Und ja, ich denke, es sollte absolut gut funktionieren. Ich hebe mir das einfach auf und mache es hart oder frisch. Okay. Du siehst die Ausgabe. Wenn du jetzt zur Konsole gehst, sollten wir sehen, also lass mich zur Konsole gehen, lass mich ein bisschen rauszoomen. Okay. Okay. Also in Ordnung. Also, wenn du siehst, ob ich das erweitere, okay, kannst du sehen, wie das Objekt gedruckt wird, okay? Oder lass mich einfach auf Vollbild umschalten, okay, da drüben wäre es besser. Okay? Also das ist die Ausgabe hier drüben. Okay? Lass mich nachschauen. Sag jetzt Console. Jetzt können Sie sehen, wie das Objekt gedruckt wird. Nun, das ist das Objekt, okay, das wir bekommen. Das ist eigentlich ein Antwortobjekt, richtig? Und das hat Daten. Sie können diese Daten sehen. Wenn Sie also auf die Daten aus der API zugreifen möchten , die Sie haben, können Sie tatsächlich Antwortpunktdaten sagen. Okay, so wird es verwaltet, und Header sind im Grunde die Header , für die Sie einige Konfigurationsdaten haben Okay? Sie haben einige Informationen zu Ihrer Anfrage. Sie haben Status. Wenn Sie also auf den Status zugreifen möchten, wie lautet der Anfrage - oder Antwortstatus? Sie können den Status des Antwortpunkts sagen. Sie können es so handhaben. Okay? Also ja, das Ziel ist es, Ihnen zu zeigen, wie die Antwortdaten aussehen , wenn Sie Axis verwenden und Sie hier die Antwortpunktdaten verwenden müssen. Okay? Also ja, so kannst du anfangen, Axis zu benutzen. Und ich hoffe, das ist ziemlich klar. Sie können den Fehler auch auf diese Weise behandeln, wenn Sie, wie Sie sehen, beim Abrufen von Daten fehlschlagen möchten Sie sehen, beim Abrufen von Daten fehlschlagen möchten Und wenn Sie hierher kommen, okay, Sie werden einen Fehler beim Abrufen der Daten sehen, etwas ist schief gelaufen Okay? Das ist die Fehlermeldung , die wir übergeben haben. Okay? Du kannst sehen, dass etwas schief gelaufen ist, oder? So würden die Dinge also funktionieren. Ich werde das einfach auskommentieren , okay. Aber ja, das ist Achse für dich und ich hoffe, du weißt ziemlich genau, was Achse ist und wie du sie nutzen kannst. 8. Gleichzeitige Ausführung mehrerer GET-Anfragen: Fangen wir also an, darüber zu sprechen, wie Sie mehrere GET-Anfragen mit Achsen auslösen können , okay? Hier verwenden wir also Axis, um diesen Endpunkt auszulösen. Okay, das ist der Post-Endpunkt. Und wenn du herkommst, okay, das ist Jason Placeholder dotpco.com Und hier löse ich diesen ersten Endpunkt aus . Ich möchte einen weiteren Endpunkt auslösen, sagen wir Benutzer, ich öffne das in einem separaten Tab und Sie können sehen, dass dies die Daten sind, die ich abrufen sollte Okay, nehmen wir an, ich möchte auch diesen API-Aufruf auslösen . Wie würde ich das machen? Okay? Also hier drüben, was wir tun werden, ist hier, ich sage Axis Dot All statt Axis Dot Get, okay? Oder wir können den Achsenpunkt Get beibehalten und müssen diesen Get-Aufruf auf den Achsenpunkt O verschieben. Okay? Also Achsenpunkt O, so etwas in der Art. Achsenpunkt O akzeptiert nun ein Array, okay? Und ich schneide das hier drüben, schneide das. Und ich werde das in dieses Array hier drüben verschieben. Okay? Also lass mich das ein bisschen besser ausrichten. Okay. Lass mich das ausrichten. Nun, okay, wir haben das hier drüben. Okay. Und dann hast du dann hier drüben, was auch schon früh da war. Okay? Aber jetzt machst du diesen einzigen EPI-Anruf hier drüben. Was ich tun werde, ist , das zu kopieren. Ich füge hier ein Komma hinzu. Am Ende Ich füge einen weiteren EPI-Aufruf und kopiere diesen Benutzerendpunkt hierher und ersetze diesen zweiten Anruf durch den Benutzerendpunkt, etwa so Jetzt können Sie den Achsenpunkt O sehen. Ich zoome einfach ein bisschen heraus, Achsenpunkt O hier drüben, und wir führen zwei separate EPI-Aufrufe durch, wie Sie sehen können In Ordnung, ich werde das einfach verlängern. Also du kannst sehen, wie es läuft, okay? Also, was wir tun würden, ist , es damals zu tun, und ab und zu haben wir eine Antwort, okay? Jetzt müssen wir also eine Möglichkeit haben , die Antwort von beiden getrennt zu behandeln, okay? Und dafür werden wir die Achsenpunktverteilung verwenden. Sie können die Achsenpunktverteilung sehen. Okay? Was ist Achsenpunktspreizung? Also die Funktion der Achsenpunktverteilung. Spread ist also eine Funktion, mit Antworten getrennt behandelt werden können, okay? Jetzt können wir den Beitrag und die Benutzer als Parameter übergeben , um den Antworten der Endpunkte des Beitrags und der Benutzer getrennt zu entsprechen Antworten der Endpunkte des Beitrags . Lassen Sie mich Ihnen zeigen, wie Sie das machen können. Also hier statt Antwort werde ich die Antwort hier loswerden, und wir können hier drüben, Beitrag Okay, und Benutzer sehen . Okay? Das kannst du hier machen. Sie werden hier natürlich alle roten Markierungen sehen, weil Sie die Antwort verwenden und die Antwort nicht existiert Also nehme ich diesen Beitrag hierher und ersetze Antwort durch Beitrag, etwa so Ich sehe hier immer noch eine rote Markierung. Okay, ich habe verstanden. Also verteilt im Grunde, diese ganze Sache muss innerhalb von Spread sein. Okay? Also so etwas. Also, ja. Ich hoffe, das macht Sinn. Also hier, Spread nimmt die ganze Sache hierher, okay? Und hier drüben gibt es Beiträge und Nutzer. Okay? Post ist im Grunde die Antwort vom Beitrag, und Benutzer ist im Grunde die Antwort vom Endpunkt des Benutzers hier drüben. Okay? Und Spread lässt uns diese beiden getrennt behandeln, okay? Also logge ich mich hier in den Beitrag ein. Ich werde auch die Benutzerinformationen hier einloggen. Okay. Lass mich sagen Nutzer Okay, Nutzer. Lass mich das speichern. Sie können sehen, dass der Beitrag absolut einwandfrei funktioniert. Okay? Wirklich großartig. Ich gehe rüber zur Inspektion, oder lass mich diese Inspektion einfach beenden. Nicht hier drüben, aber ich werde diese Vollbildansicht haben und wir aktualisieren. Sie können sehen, wie der Beitrag angezeigt wird. Ich kann inspizieren, trösten. Sie können sehen, wie das Objekt viermal gedruckt wird, weil jedes Objekt aufgrund des strikten Modus zweimal gedruckt wird . Also hier sehen Sie diese Daten hier. Das sind die Post-Daten. Okay? Das ist das Erste, Daten posten. Und dann haben wir wieder die Postdaten. Okay, das sind also Benutzerdaten, wie Sie sehen können. Dies ist eine Benutzerinformation , die abgerufen wird. Das sind wieder die Post-Daten, 100 und das sind wieder die Benutzerinformationen, das sind zehn Benutzer, richtig? Also ja, so können Sie mehrere API-Aufrufe handhaben und damit arbeiten. Und das ist eine der Funktionen oder eine der Flexibilität, die Axis uns bietet. Okay? Sie haben diese beiden Daten. Was Sie tun können, ist, zu entscheiden, was Sie tun möchten. Sie können die postbezogenen Informationen in einem Bundesstaat speichern, und Sie können die benutzerbezogenen Informationen in einem anderen Bundesstaat speichern, und Sie können sie hier anzeigen. Sie können es auch auf der Benutzeroberfläche rendern. Okay? Aber ja, so weit, so gut, wir können mit Hilfe von Axis mehrere API-Aufrufe durchführen , und ich hoffe, das ist euch allen ziemlich klar. 9. Daten mit POST-Anforderungen in Axios senden: Jetzt ist es an der Zeit, dass wir darüber sprechen , wie Sie die POST-Anfrage in Ihrer React-Anwendung verwenden Und dafür, hier auf Jason, bitte warte, wenn du nach unten scrollst. Okay, hier findest du diesen EPI oder diesen Endpunkt hier, dem du eine Post-Anfrage stellen kannst Okay? Also auf Slash Post, wenn du eine Post-Anfrage stellst, okay, es würde sie akzeptieren Und hier haben Sie eine Anleitung als Anwendungsbeispiel. Also gehe ich zur Anleitung mit den Anwendungsbeispielen und scrolle hier nach unten. Okay, du kannst dieses Beispiel hier sehen, okay? Also eine Ressource erstellen, okay? Also, was es tun wird, ist, hier eine Postanfrage zu stellen. Sie können sehen, dass die Methode Post ist. Das ist der Hauptteil, den Sie einsenden, die Header, und so verwalten Sie die Antwort Nun, die Antwort, die Sie erhalten, okay, Sie werden bekommen, was Sie gesendet haben, zusammen mit der ID hier drüben. Hier drüben ist das eine gefälschte API, also wird die Ressource nicht wirklich auf dem Server aktualisiert, aber sie wird gefälscht sein, als ob Okay. Also was wir hier machen werden ist, dass ich herkomme. Okay. Und hier brauchen wir ein Formular. Also hier erstelle ich ein Formular, ich sage Formular, so etwas, und Formular wird nichts haben. Ich werde nur eine Schaltfläche haben , die einfach eine Post-Anfrage auslöst. Also sage ich Button-Typ, ich sage hier Senden. Okay, und ich sage Beitrag hinzufügen, etwa so. Okay? Du hast diesen Knopf hier, okay? jetzt darauf klicken, möchten wir, dass die Post-Anfrage ausgelöst wird. Okay? Also ich sage hier bei einreichen auf einreichen. Jetzt muss ich eine Funktion hinzufügen. Ich muss das mit einer Funktion verknüpfen, also sage ich Handle, Submit. Okay. Das gibt es noch nicht. Natürlich müssen wir das schaffen, oder? Also hier drüben, was ich tun werde, ist diese Funktion const on submit zu erstellen Okay? Also sage ich Const bei Submit Etwas wie das hier. Oh, tut mir leid, nicht abschicken, abschicken. Es steht nicht auf Absenden, Handle Abschicken, so etwas in der Art. Ich sage Event. Also wird es das Ereignis hier akzeptieren, und ich habe diese Funktionsdefinition hier drüben, ungefähr so. Okay. Okay, jetzt brauche ich die Logik hier drüben, um die Post-Anfrage grundsätzlich zu bearbeiten Okay? Also, was ich tun werde, ist zuerst einen neuen Beitrag zu erstellen, okay? Nun, die Daten, die ich senden muss, sind Titeltext und Benutzer-ID. Das muss ich senden, oder? Also kopiere ich das und komme her, okay. Und hier drüben sage ich const, neuer Beitrag, und ich lasse einen Beitrag erstellen, ungefähr so. Okay? Okay. Ich werde das auf mehreren Zeilen belassen. Das ist absolut okay. Okay, so etwas. Okay, das ist also der Beitrag. Das würde ich sagen. Das ist das Objekt, das ich posten möchte, oder? Der Titel ist also fu, Hauptteil ist bar und die Benutzer-ID ist eins. Okay? Also, was wir hier machen können, ist, dass ich, nachdem das erstellt wurde, eine Achse verwenden werde. Also füge ich eine Achse hinzu und Sie können sehen, wie die Import-Anweisung oben hinzugefügt wird Also werden wir Achsen verwenden. Ich sage Axis Dot Post. Okay. Und Post ist eine Methode , die wir verwenden werden. Ich muss die URL hier eingeben und dann muss ich sie verwenden , um die Antwort zu bearbeiten. Ups. Also dann, um mit der Antwort umzugehen, so etwas Okay. Also hier drüben würde ich das Okay brauchen, ich muss das auch hier schließen. Okay. Und ich werde diese offene Klammer loswerden. Okay, Klammer schließen. Also muss ich innerhalb des Beitrags die URL und das neue Post-Objekt übergeben . Also werde ich herkommen. Das ist das neue Post-Objekt. Okay. Also werde ich das hier erwähnen. Und am Ende sage ich Komma neuer Beitrag. Das ist also das Objekt, das ich übergebe. Okay, so etwas in der Art. Lass mich damit im Vollbildmodus arbeiten. Ordnung. Ich gehe einfach in Vollbildmodus, damit du alles siehst. Okay. Sie können den Achsenpunkt hier drüben sehen, und ich übergebe das neue Post-Objekt zusammen mit diesem. Und jetzt, in der Zeit von damals, brauche ich Antwort, okay, Pfeilfunktion. Und hier drüben muss ich mich jetzt um die Antwort kümmern. Okay? Wie gehe ich mit der Antwort um? Ich sage hier einfach Console Dot Log, okay? Und ich sage, neuer Beitrag hinzugefügt. So etwas, und ich sage einfach Antwortpunktdaten. Okay? Wie. Okay, dann sage ich Daten festlegen, ups Okay, festgelegte Daten existieren also nicht. Wir müssen hier einen Bundesstaat hinzufügen. Okay? Also was ich tun werde, ist konstante Daten und ich sage feste Daten Ich werde Use State hier benutzen. Okay. Und was wir hier tun werden, ist Set Data zu nennen , ungefähr so. Und hier drüben sage ich Antwort. Punktdaten und Komma und ich destrukturiere Daten, ungefähr so. In Ordnung Also das ist erledigt, denke ich, Ordnung. Keine Probleme als solche. Und ja, Handle Submit ist auch damit verknüpft. Okay. Lassen Sie mich das jetzt minimieren. Und hier mache ich eine Aktualisierung, eine schnelle Aktualisierung. Wir werden auch die Konsole öffnen, um zu sehen, welche Ausgabe wir erhalten. Und ich sage hier Beitrag hinzufügen. Okay. In dem Moment, in dem ich bei der Post sage , uups, sehe ich nichts Okay, also muss ich auch E Punkt sagen, Prevent Default, Prevent Default Also muss ich das sagen, und jetzt lass uns das versuchen. Okay. Also sage ich Werbepost. Ups Es heißt also, dass Daten nicht iterierbar sind. Ich erhalte auch hier in Zeile 16 eine Fehlermeldung. Okay? Also das Problem sind Antwortpunktdaten, und ich destrukturiere die Daten Okay? Also das ist ein Fehler und Fehler ist uncodiert. Daten sind nicht durchführbar. Also was ich tun würde, ist dieses Ding hier los zu machen, das hier. Okay. Und ich werde das speichern. Lass mich eine Auffrischung machen. Okay. Also habe ich diesen Teil hier drüben losgeworden. Okay. Das ist jetzt ziemlich einfach. Ich sage Beitrag hinzufügen und du kannst sehen, okay, der Beitrag wird hinzugefügt und welcher Beitrag hinzugefügt wird, der auch hier angezeigt wird. Ordnung. Also ja, so würde eine Post-Anfrage funktionieren, wenn Sie mit Axis arbeiten. Okay? Es ist ziemlich einfach. Ich gehe einfach in den Vollbildmodus , damit Sie eine bessere Ansicht haben. Ich zoome einfach ein bisschen rein. Okay. Wir nutzen es. Hier liegt der Knackpunkt, okay? Sie sagen also Axis Dot Post, geben die URL und das Objekt an, das Sie posten möchten Okay? Und dann haben Sie die Bearbeitung hier und Sie kümmern sich um die Antwort, die Sie erhalten. Ordnung. Also ja, das ist ungefähr die Post-Anfrage mit Axis. Ich hoffe, das war nützlich und ich hoffe, Sie konnten mitmachen. 10. API-Sicherheit mit Axios Interceptors optimieren: Jetzt ist es an der Zeit, über Interzeptoren zu sprechen und Hier drüben habe ich bereits ein Beispiel geschrieben, dem ich diesen Header und eine Schaltfläche zum Hinzufügen eines Beitrags habe , okay? Und wenn ich auf Beitrag hinzufügen klicke, wird eine Post-Anfrage an einen Remote-Server gesendet, und Sie können sehen, wie die Daten in der Konsole veröffentlicht werden. Nach der erfolgreichen Antwort auf die Post-Anfrage, okay? Und Sie werden sehen, dass dies mehrmals passiert. Okay. Wir verwenden hier diese gefälschte API, bei der sich um einen Jason-Platzhalter handelt, und wenn Sie nach unten scrollen, verwende ich die Post-API hier drüben. Das ist einer, okay? Kommen wir zurück zum Code hier drüben, okay? Das ist die Codebasis. Nun, was sind Interzeptoren und warum brauchst du sie? Okay? Nun, Interzeptoren sind eine Sache mit Achsen , die es Ihnen ermöglichen, benutzerdefinierten Code auszuführen oder die Anfrage abzufangen, bevor sie bearbeitet oder abgefangen wird Ich hoffe, das macht Sinn. Interzeptoren sind also nichts anderes, als dass Sie die Anfrage abfangen können, bevor sie bis dahin akzeptiert werden, oder sie fangen Also, warum würdest du das tun wollen? Vielleicht möchten Sie also einen benutzerdefinierten Code haben, der ausgeführt wird, bevor eine Anfrage gesendet wird oder nachdem eine Antwort eingegangen ist. Okay? Nun, benutzerdefinierter Code könnte Dinge wie das Hinzufügen von Authentifizierungstoken oder etwas Ähnlichem beinhalten, okay? In diesem Fall kommt dann dieses Konzept der Interzeptoren ins Spiel, oder? Lassen Sie mich Ihnen zeigen, wie Sie es nutzen können Okay? Also, sagen wir mal, hier oben habe ich einen Abfangjäger Ich sage Axis tot, ich sage Abfangjäger. Sie können den Properties Interceptor sehen und Sie haben Request Okay? Also hast du hier etwas zu gebrauchen, okay? Also, im Rahmen des Gebrauchs, was Sie tun würden, ist, was wir verwenden werden. Hier drüben werde ich die Pfeilfunktion haben. Ich werde Anfrage sagen. Okay? Für jede Anfrage gibst du mir ein Konsolenprotokoll, okay? Das Konsolenprotokoll sollte die Startanfrage sein, okay? Etwas wie das hier. Okay. Jetzt werde ich das speichern, okay? Jetzt, wenn ich herkomme, wenn ich die Konsole öffne, lass mich die Konsole leeren. Lassen Sie mich einen Refresh machen. Okay. Wenn ich jetzt Beitrag hinzufügen sage, siehst du die Startanfrage. Ups, hier ist ein Fehler aufgetreten. Okay? Im Versprechen steht „uncaught“, Tippfehler, okay? Also habe ich den Fehler bekommen. Der Fehler ist, dass wir die Anfrage hier zurückgeben müssen. Okay? Das ist ein Fehler, den ich gemacht habe. Wenn du hierher kommst, wenn du aktualisierst, löschst und wenn ich bei Beitrag sage, wirst du sehen, dass Startanfrage neuer Beitrag hinzugefügt wurde, okay? Denken Sie also daran, das hier zurückzugeben. Okay? Also ja, das wird abgefangen und bei jeder Anfrage hier gedruckt. kannst du sehen. Bei jeder Anfrage siehst du die Startanfrage, oder? Sie haben Zugriff auf das Anforderungsobjekt, das Sie hier ausdrucken können. Also ich kann hier Anfrage sagen. Okay. Wenn ich hierher komme, aktualisiere ich, wenn ich Beitrag hinzufügen sage, können Sie sehen, dass ich Zugriff auf das gesamte Anforderungsobjekt hier habe . Ich kann jede Art von benutzerdefinierten Headern hinzufügen oder entfernen , die ich möchte Okay? Also ich kann sagen, Punkt-Header anfordern, ich kann es auf diese Weise verwenden und ich kann es anpassen Ich kann hinzufügen, ich kann jede Art von Token hinzufügen. Also, wenn zum Beispiel irgendeine Art von Anfrage authentifiziert ist, richtig, und Sie müssen möglicherweise das Token aus dem lokalen Speicher übergeben , oder? Egal, wo Sie Axis verwenden, es wäre wirklich umständlich, das zu tun, oder? Sie können also einen Interceptor definieren lassen. Weltweit. Und wann immer eine Anfrage an den Server ausgelöst wird, können Sie hier eine Logik haben, bei der Sie zum lokalen Speicher gehen, das Token abrufen, das Sie an den Server übergeben möchten , und es hier formatieren und zum Header hinzufügen können. Sie können also Punkt-Header für Anfragen setzen, das Token hinzufügen und es dort behalten Was also passieren würde, ist, dass bei jeder Anfrage das Token hinzugefügt wird, weil das die Standardeinstellung ist, oder? Server braucht es. Sie müssen diesen Code also nicht überall replizieren So hilft es, okay? Und das ist ein Request-Interceptor. Ich habe einen Response Interceptor , den ich dir auch zeigen möchte Okay? Also Achsenabfangjäger, Punkt, das wäre Antwort, wenn du das richtig rätst Du musst hier benutzen sagen. Ups, wir sagen nutzen und wir werden das nutzen , okay? Und hier wirst du die Antwort sehen, und du kannst so etwas haben Sie werden hier ein Konsolenprotokoll erstellen. Okay. Du kannst Antwort sagen. Okay. Hoppla. Und hier drüben kannst du Antwort sagen So wie es ist. Okay. Und hier drüben, Antwort zurückgeben. Etwas W. In Ordnung. Also das gilt für jede Antwort, Sie haben auch Zugriff auf die Antwort. Okay? Also lass mich das mal auffrischen. Klar. Ich sage Beitrag hinzufügen. Sie können die Startanfrage sehen. Sie haben das Anforderungsobjekt, die Antwort, Sie haben die Antwortdaten, und dann sehen Sie, wie dies gedruckt wird. Nun, woher wird das gedruckt? Das wird von da an hier gedruckt. kannst du sehen. Also dieses Ding wurde am Ende ausgeführt. Okay? Was heißt das, ist? Das bedeutet, dass der Interceptor immer zuerst aufgerufen wird, wenn die Antwort empfangen wird, und dann werden die Daten bis dahin verarbeitet kannst du hier sehen. Dieser Teil wird also immer zuerst ausgeführt, wenn die Antwort empfangen wird, und dieser Teil wird ausgeführt bevor die Daten an den Server gesendet werden. Okay? Also ich hoffe, das Konzept von Interceptor ist klar und ich hoffe, Sie haben ein gutes Verständnis dafür , wie das funktioniert Sie können damit herumspielen und sich die abgefangenen Daten ansehen , und ich hoffe, das 11. Benutzerdefinierte Axios-Instanzen für eine bessere Kontrolle erstellen: Hallo, da. Jetzt ist es an der Zeit, dass wir über die benutzerdefinierte Achseninstanz sprechen. Was ist nun eine benutzerdefinierte Achseninstanz? Also hier benutzen wir Axis, okay? Aber mit Axis können Sie eine benutzerdefinierte Zugriffsinstanz erstellen, die eine vorkonfigurierte Version von Axis für Ihre Anwendung ist vorkonfigurierte Version von Axis für Ihre Anwendung Und wenn Sie es erstellen, können Sie Standardoptionen wie Basis-URL-Header, jede Art von Standard-Headern, die Sie benötigen, jede Art von Timeout-Einstellungen festlegen, die die Anfrage in Ihrer Anwendung haben soll All diese globalen Konfigurationen können Sie also mit der benutzerdefinierten Achseninstanz und jedem API-Aufruf , den die gesamte Anwendung über alle Komponenten hinweg tätigen wird, diese benutzerdefinierte Achseninstanz verwenden, Lassen Sie mich Ihnen zum Beispiel ein Szenario geben. Also hier hast du diese Postanfrage. Ich habe vielleicht noch eine Get-Anfrage hier in derselben Komponente. Jetzt habe ich vielleicht Tausende von Komponenten, oder? Hunderte von Komponenten, sagen wir , in diesem speziellen Fall, sagen wir, mindestens 50 Komponenten haben API-Aufrufe. Stimmt das? Also, wenn sie EPI-Anrufe haben, wirst du die ganze URL da drüben wiederholen Okay? Das ist nicht gut, okay, denn wenn sich morgen die Server-URL ändert, ist das nicht gut. Wenn sich irgendein Parameter ändert, okay, du musst Änderungen in allen Dateien dort drüben vornehmen. Okay? Es ist besser, den gesamten allgemeinen konfigurationsbezogenen Code in einer Datei zu haben , sodass Sie, falls es irgendwelche Änderungen gibt, ihn an einer Stelle ändern können, und dann ist es alles, was er durchläuft, oder? Hier kommt also die benutzerdefinierte Zugriffsinstanz ins Spiel. Um also eine benutzerdefinierte Zugriffsinstanz zu erstellen, werde ich Ihnen zeigen, wie das funktionieren wird, okay? Also hier machen wir einen Post-EPI. Was wir tun können, ist const API zu sagen. Sie können das alles nennen, was Sie wollen, aber ich nenne es gerne API Du kannst hier Axis Dot, Create sagen. Okay? erstellen wir die benutzerdefinierte Achseninstanz, und darin können Sie die gesamte Konfiguration definieren. Alles klar? Also, was für eine Konfiguration können Sie hier haben. Okay? Also, hier für diese Sache, was ich tun kann, ist, dass ich das besorgen kann. Ich habe das herausgeschnitten und hier drüben sage ich p URL. Sie können die PaceRL sehen. Du kannst Doppelpunkt sagen, ich kann hier eine PRL hinzufügen, etwa so Okay? Hoppla. Also nicht hinterhältig, ich nehme das Okay. Dies ist die Basis-URL für alle API-Anfragen. Okay? Dann kann ich hier Überschriften haben. Sie können diese Header-Eigenschaft sehen. Ich kann in Headern sagen, ich möchte, dass die Standard-Header hier so sind wie alle Standard-Header, die Sie haben können Nehmen wir an, ich möchte hier eine Autorisierung haben, okay, und ich möchte, sagen wir, einen Träger haben und du kannst hier ein paar Token hinzufügen, okay? Welches Token Sie auch haben, Sie können es hinzufügen. Okay, und gesendet wurde es zusammen mit der API gesendet, okay? Sie haben das definiert. Wie nutzen Sie das? Okay? Also was Sie tun können, ist hier, anstatt Axis Dot Post hier zu verwenden, Sie können API sagen, so etwas, API Dot Post, und das wird funktionieren, es wird das als BCRL verwenden und es wird sicherstellen, dass diese Header vorhanden sind, zum vorhanden sind, Wenn ich das speichere und wenn du hierher kommst, okay, ich habe diese Anwendung betriebsbereit Okay, du hast diesen Button hier drüben , der eine Post-Anfrage auslöst. Wenn ich jetzt Beitrag hinzufügen sage, okay, du kannst sehen, dass ein neuer Beitrag hinzugefügt wird. Ordnung. Also ich sehe nicht, dass das funktioniert gut, aber ich sehe nicht, dass die Anfrage hier gedruckt wird. Okay? Also das ist etwas , das ich drucken kann. Okay? Lass mich das auch ausdrucken, okay? Also, damit die Anfrage gedruckt wird, füge ich hier Intercept hinzu, okay? Also fügen wir auf diese Weise Interzeptoren hinzu, Achse, Interzeptoren, Punktanforderung, Tt use hier, ungefähr so Okay? So fügt man normalerweise Interzeptoren hinzu Okay. Aber da wir eine benutzerdefinierte Achseninstanz verwenden , können Sie anstelle von Axis hier API Dot Interceptors sagen Okay? Das wirst du tun. In Ordnung. Und hier, du wirst hier Anfrage sagen. Okay. Und hier drüben musst du die Anfrage ausdrucken. Hier drüben sage ich Console Dot Log. Ich sage Startanfrage. Okay. Anfrage starten. Hier drüben. Und Sie können das Anforderungsobjekt hier hinzufügen , etwa so. Okay? Das ist erledigt. Wenn du jetzt herkommst, okay, lass mich eine Auffrischung machen. Wenn ich sage, Beitrag hinzufügen, Hoppla, dann kenne ich diesen Fehler Ordnung. Ich muss die Anfrage auch zurückschicken, okay? Anfrage zurücksenden. Okay. Jetzt sollte es gut funktionieren. Eine Auffrischung des Feuers. Wenn ich Werbepost sage, siehst du, dass die Anfrage gedruckt wird. Wenn Sie das nun erweitern, sollten Sie sehen, dass es beim Senden der Anfrage einen Autorisierungsheader gibt. Dies ist der Autorisierungsheader, den wir über die benutzerdefinierte Achseninstanz hier hinzugefügt haben, wird hinzugefügt und an den Server gesendet. Sie können hier jede Art von Logik verwenden, in der Sie, Sie wissen schon, irgendeine Art von Token abrufen und all das, Sie können das anzeigen, okay? Das ist also in gewisser Weise wirklich hilfreich, oder? Und ja, das ist es. So können Sie tatsächlich so eine haben Konfiguration haben, die von Ihrem Code getrennt ist. Jetzt möchte ich etwas näher erläutern, wann Sie eine benutzerdefinierte Achseninstanz verwenden sollten und wann Sie Interzeptoren verwenden sollten, okay Nehmen wir an, wenn Sie Token einsenden, okay, Sie können auch hier in der benutzerdefinierten Achseninstanz eine Token-Konfiguration hinzufügen, und Sie können auch hier im Interceptor ein Token Wann immer eine Anfrage an den Server gesendet wird, kurz bevor sie gesendet wird, können Sie hier ein Token hinzufügen Okay? Also, wann sollte man welche Methode verwenden, richtig? Nun, wenn Ihr Token oder Ihre Konfiguration statisch ist, jede Art von Konfiguration, die statisch ist , okay, und sie erfordert keine Änderung, dann können Sie diese Konfiguration hier zur benutzerdefinierten Achseninstanz hinzufügen . Okay? Zum Beispiel haben Sie vielleicht eine Code oder Sie haben eine Art Header , den Sie hier vielleicht übergeben möchten , wo Inhaltstyp steht. Okay, du kannst hier also Inhaltstyp sagen. Also dieser Inhaltstyp-Header, okay, das bedeutet Anwendungs-JSN Okay. Also diese Art von Headern, die im Grunde genommen statisch sind, können in die benutzerdefinierte Zugriffsinstanz aufgenommen Es gibt jedoch Anforderungen bei denen Sie möglicherweise dynamische Header haben Was ich mit dynamischen Headern meine, ist, sagen wir, Sie möchten einen Header hinzufügen, okay, der das Token enthält, das aus dem lokalen Speicher abgerufen wird Jetzt wird das lokale Speichertoken möglicherweise von Zeit zu Zeit aktualisiert Es könnte ein Ablaufdatum haben. Es ist nicht statisch. Es ist vielleicht nicht statisch, okay? In diesem Fall, kurz bevor die Anfrage gesendet wird, möchten Sie vielleicht, dass ein Code ausgeführt wird, um zu überprüfen, was ein Token ist, dieses Token zu erhalten und es zusammen mit der Anfrage zu senden, okay? In diesem Szenario werden Sie also Header verwenden, die im Interceptor hinzugefügt werden , da dies nicht statisch ist Das ist dynamisch, oder? Und kurz bevor die Anfrage gesendet wird, möchten Sie, dass der Token-Check durchgeführt wird, okay? Hier könnten also die Interceptoren zum Einsatz kommen, oder? Automatische Fehlerbehandlung. Interzeptoren eignen sich also hervorragend für die globale Bearbeitung von Antworten auf Fehler. Okay? Also, wenn Ihre Antwort EPI darauf hinweist, dass ein Token abgelaufen ist, zum Beispiel 401 Unauthorized Ein Interceptor kann das Aktualisierungstoken automatisch erhalten. Okay, ich sollte den Code haben, um das Token automatisch zu aktualisieren und die Anfrage erneut zu versuchen Also hier haben wir den Request Interceptor. Sie können einen Antwort-Interceptor haben, mit dem Sie überprüfen können, ob der Wenn es 401 war, haben Sie einfach den Code zum Aktualisieren des Tokens und Okay. Also das ist etwas, was du mit der benutzerdefinierten Achseninstanz hier nicht machen kannst, oder? Weil das statisch ist, oder? Und ja, das ist der Unterschied zwischen der benutzerdefinierten Achseninstanz und dem Interceptor-Konzept Okay? Es mag so aussehen, als ob viele meiner Schüler das Gefühl haben sich das Konzept überschneidet, aber beide sind unterschiedlich. Das versuche ich hervorzuheben. Ordnung? Also ich hoffe, das war aufschlussreich und ich hoffe, Sie konnten es verfolgen In Ordnung, ich werde euch alle so sehen. 12. Benutzerdefinierte Axios-Instanzen mit Interceptors aufwerten: Jetzt würden wir diese benutzerdefinierte Achseninstanz weiterentwickeln diese benutzerdefinierte Okay? Und was ich tun würde, ist, das zunächst in eine separate Datei zu verschieben. Okay? Dieser Code kann also etwas komplex werden. Also, was ich tun würde, ist, das hier drüben zu schneiden. Ich würde zu meiner Projektstruktur kommen und hier einen Ordner erstellen. Ich würde diesen Ordner so nennen, wie Sie diesen Ordner als API aufrufen können. Du kannst das als Utils bezeichnen, so ähnlich. Okay. Und hier drüben kannst du Api Dot Has haben. Und hier können Sie den ganzen Code einfügen. Okay. Also das wird hier benötigt, Achse importieren. Das ist also etwas, das ich hier in dieser Datei verschieben werde . Okay. Und wir müssen die API exportieren. Also sage ich Export oder Standard und ich sage hier API. Okay, so etwas. In Ordnung. Das ist erledigt. Okay, API wird exportiert. Und jetzt, wo wir hier sind, müssen wir diese API eingeben. Also kann ich das eingeben. Okay. Du kannst die Utils-API sehen, okay? Okay, aus irgendeinem Grund gefällt mir dieser Utils-Ordnername nicht, also ändere ich ihn einfach auch in API Okay. Und ich werde die Eingaben aktualisieren, richtig? Also ja, jetzt sieht es gut aus. Also, ich habe diesen EPI-Ordner, in dem ich meine vergangenen Js organisiert habe Und was ist Pi Dot Gs? Es besteht aus der gesamten Konfiguration zusammen mit Interzeptoren für die benutzerdefinierte Achseninstanz hier drüben Okay? Und du kannst es benutzen, wo immer du willst. Okay? Also so benutzen wir es. Und wenn du herkommst und ich aktualisiere, okay, wenn du bei Post sagst, wirst du sehen, dass es absolut gut funktioniert. Okay, das hat unseren Code ein bisschen modularer gemacht . Richtig. Was wir jetzt tun können, ist, das hier zu verbessern. Okay? Also geben wir diesen Header weiter. Okay. Ich werde dieses Token-Ding hier loswerden. Okay. Nehmen wir an, wir haben hier das Konzept des dynamischen Tokens, oder? Was wir also tun können, ist hier drüben, ich habe diese Anfrage. Okay? Ich nehme das. Und hier kann ich eine weitere Funktion hinzufügen. Ich kann Cfico sagen, so etwas, und ich füge eine Pfeilfunktion wie diese füge eine Pfeilfunktion wie Okay. Und hier drüben kann ich Const Token sagen Okay. Ich kann das Token, lokalen Speicher, Punkt Artikel abrufen. Ich erhalte das Token aus meinem lokalen Speicher, also sage ich hier Token. Okay. Und dann kann ich tatsächlich sagen, wenn ein Token gefunden wurde, wenn ein Token gefunden wurde, was würden Sie dann tun? Du würdest also Config Tot Headers sagen. Sie können es also Config oder Request nennen. Das ist absolut in Ordnung. Also hier nenne ich es eine Anfrage, also nenne ich es hier als Konfiguration. Okay? Also ich sage Config Dot Headers Dot Authorization Sitzung, o ist gleich. Ich kann ein Pairer-Token hinzufügen. Damit ich pairero sagen kann, muss ich es in diesem Format hinzufügen. Ich kann Token sagen. Etwas wie das hier. Ordnung. Also wird das Token nur hinzugefügt wenn das Token gefunden wird, oder? Wenn das Token nicht im lokalen Speicher gefunden wird, wird es beibehalten. Okay. Also das wäre erledigt. Und wenn du herkommst, okay? Also untätig, das Token wird nicht hinzugefügt weil es momentan keinen lokalen Speicher gibt, okay? Also ist es keine Kunst, oder? Es ist nicht schwer in den Headern. Lass uns sehen Es ist kein Hinzufügen. Sie können es sehen, weil ich momentan nichts im lokalen Speicher für diese Anwendung gespeichert habe. Aber wenn Sie es haben, wenn Sie es speichern, dann bekommen Sie das und können es hierher schicken. Okay? Jetzt hier drüben, das ist erledigt. Was ich tun kann, ist, dass ich sogar damit umgehen kann, ich hier sogar eine Art Fehlerbehandlung hinzufügen. Ich kann also Fehler sagen. So etwas, und ich kann sagen, Hoppla, also kann ich Console Dot Error sagen Okay. Und hier drüben kann ich sagen: Fehler bei der Anfrage, Fehler bei der Anfrage und bei uns können Sie Fehler sagen. Ordnung. Und du kannst sagen , versprochen, nicht zurückweisen. Ich bearbeite die Fehler, ich lehne die Anfrage ab. Oh, okay. Ich sage Fehler. Okay, so etwas. Okay. Ich behandle den Anforderungsfehler damit, okay. Und das ist eine Möglichkeit, okay. Dann können Sie sogar den Response Interceptor hinzufügen. Bis hier dreht sich alles um den Request-Interceptor. Was ich hier tun kann, ist EPI Dot Response zu sagen . Oh, 1 Sekunde Pi-Punkt-Interzeptoren Punkt-Antwort, P-Punkt-Interzeptoren Punkt-Antwort, Punkt U. Das ist In Ordnung. Und jetzt müssen wir die Pfeilfunktion hinzufügen. Also, ich würde sagen , Antwort, ungefähr so. Okay. Und du kannst hier eine Art von Handhabung hinzufügen. Okay? Nun, was wir hinzufügen würden, ist, dass wir sagen können , wenn die Antwort erfolgreich ist, würden wir einfach die Daten zurückgeben. Also antworte ich und gebe dann die Daten zurück, richtig? Also sagen wir: Okay, ich antworte, das ist schon geschrieben. Also wenn Antwort, dann Antwort zurückgeben. Okay, ich füge hier also keine Logik hinzu. Sie können im Grunde Ihre eigene Logik haben. Aber so würdest du hier drüben damit umgehen . Das ist der Zweck, okay? Das heißt, du kannst hier nach der Antwort suchen und dann Tita zurückgeben. Okay? Sie geben die Antwort also im Wesentlichen zurück. Okay? Falls es einen Fehler gibt, wie würdest du damit umgehen? Okay. Also hier drüben, du kannst einfach kommen und sagen, okay, lass mich hier einen Tab hinzufügen. Okay. Und jetzt kannst du hier drüben sagen, Fehler. Okay. Also das ist ein Fehler, und dann kannst du so etwas sagen. Und hier drüben kannst du sagen, ob ich Fehler, Punkt, Antwort sagen kann. Okay. Deshalb suche ich weltweit nach dem Ablauf des Tokens und anderen Fehlern. Okay? Also ich kann hier Fehler, Punkt, Antwort, Punktstatus sagen. Ups, Status hier drüben. Und wenn es 401 ist, okay, du kannst hier jede Art von, du weißt schon, jede Art von Behandlung hinzufügen . Sie können Console Dot Error sagen, etwas Ähnliches, und Sie können Unautorisiert sagen. So etwas in der Art. Okay. Sie können es hier regeln und Sie können auch die Wiederholungslogik hinzufügen auch die Wiederholungslogik je nachdem, welche Art von Fehlern Sie erhalten Okay. Wenn du einen Fehler von 500 bekommst, okay, interner Serverfehler oder so, dann kannst du hier noch einen hinzufügen und noch einen Check sagen. Du kannst sagen, ob der Fehler 500 ist. Okay, dann kannst du Serverfehler sagen. Also im Grunde mache ich hier nur ein Protokoll, aber du kannst damit umgehen, wie du willst, okay? Ich füge Semikolons hinzu Okay, und ich füge hier runde Klammern hinzu. Okay. Also ich denke, das ist ziemlich klar, wie das hier helfen kann. Okay. Und wenn das erledigt ist, okay, die ganze Sache erledigt ist, kann ich hier drüben das Rückgabeversprechen genau prüfen und ich kann Fehler sagen. Ordnung. Sie lehnen also grundsätzlich andere Fehler Ordnung. Also ja, so können Sie die benutzerdefinierte Achseninstanz weiterentwickeln . Und das kann die benutzerdefinierte API sein, die die benutzerdefinierten Pits hat, die die globale Konfiguration für die API-Anfragen hat, die Sie ausführen, einschließlich der BaseURLs Wenn Sie also die Basis-URLs aus der ENV-Datei beziehen, können Sie diese Logik auch hier haben, Und Sie können es getrennt von der ENV-Datei verwalten. Okay? Morgen Header, falls neue Header hinzugefügt werden, okay Denken Sie also daran, dass Sie hier die URL nicht fest codieren, Sie codieren die Header nicht fest Sie nutzen nur die API und die gesamte Logik, die sich auf die Komponente bezieht , die hier drüben ist, okay? Nur die Logik, die sich auf die Komponente bezieht , ist hier drüben, sonst nichts. Wenn sich morgen etwas an der API ändert, falls irgendwelche Header benötigt werden, musst du die Änderung einfach an einer Stelle vornehmen, okay? In diesem Fall wird dieser Pi Dot JS an allen Stellen verwendet Wenn Sie also morgen 50 Komponenten haben, wird dies in 50 Komponenten verwendet werden. Sie müssen also keine Änderungen an den 50 Komponenten vornehmen, Sie kümmern sich nur einmal darum und schon ist alles erledigt. Okay. Also ja, so funktioniert das. Und ich hoffe Sie finden den Nutzen davon hier drüben. Ordnung. Also ja , es geht um diese benutzerdefinierten Achseninstinkte und Interzeptoren, wie man sie zusammenführen und mit ihnen arbeiten kann Und ich hoffe, du fandest das nützlich. 13. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser transformativen Reise in die Welt der EPI-Integration in React angelangt Nun, wir haben untersucht, wie die Integration von APIs in Ihre Anwendung die Entwicklung dynamischer datengesteuerter Anwendungen entscheidend verändern kann Entwicklung dynamischer datengesteuerter Wir befassen uns mit den Grundlagen der Durchführung von API-Aufrufen, Ladevorgängen und Fehlern und Verbesserung der Sicherheit durch die Integration von benutzerdefinierten Zugriffsinstanzen und Integration von benutzerdefinierten Zugriffsinstanzen Wir haben auch gelernt und untersucht, wie Sie mehrere API-Aufrufe gleichzeitig tätigen können, und Sie haben nun die Fähigkeiten erworben, die Sie benötigen, um Ihre React-Projekte voranzutreiben. Aber denken Sie daran, dass die Erkundung hier nicht endet. Ich möchte Sie ermutigen, weiter zu experimentieren, erforschen und die Grenzen dessen, was mit EPIs in Ihrer React-Anwendung möglich ist Ich freue mich darauf zu sehen, wie Sie diese Fähigkeiten und Kenntnisse, die Sie erworben haben, nutzen werden , um Ihre Webentwicklungsprojekte voranzutreiben Denken Sie daran, dass es bei Innovation vor allem darum geht, neue Techniken und Technologien zu nutzen, und die EPI-Integration oder die Arbeit mit EPIs ist ein wichtiger Bestandteil Ihres Vielen Dank, dass Sie eine so engagierte und begeisterte Ich hoffe, dieser Kurs hat Sie nicht nur mit neuen technischen Fähigkeiten ausgestattet, sondern Sie auch dazu inspiriert kreativ über die Entwicklung robuster Webanwendungen nachzudenken In diesem Kurs findest du ein Klassenprojekt, das ich dir empfehlen möchte zu vervollständigen und im Projektbereich mit der gesamten Klasse zu teilen Projektbereich mit der gesamten Klasse Ich wünsche dir viel Glück und alles Gute.