So holen Sie Daten in Svelte ab

Dieses Tutorial zeigt, wie Daten von einer API innerhalb einer Sufle -Anwendung abgerufen und angezeigt werden. Wir werden sowohl die integrierte fetch API als auch die Axios-Bibliothek verwenden.

Schlüsselkonzepte:

• REST -APIS: REST -APIs (Repräsentationszustandsübertragungsanwendungs ​​-Programmierschnittstellen) Ermöglichen Sie die Anwendungen, Daten mithilfe von HTTP -Anforderungen zu kommunizieren und auszutauschen. Zu den Schlüsselkomponenten gehören HTTP -Methoden (GET, Post, Put, Patch, Löschen), Endpunkte (URLs angeben Ressourcenpositionen), Header (Metadaten) und Anforderungskörper (Datennutzlasten).

• svelte's onMount(): Dieser Lebenszyklus -Hook führt Code aus, nachdem eine Komponente im DOM montiert ist, ideal zum Abrufen von Daten, wenn die Komponente zum ersten Mal rendert.

• API abrufen: JavaScripts integrierte fetch() -Methode bietet eine vielversprechende Möglichkeit, HTTP-Anforderungen zu erstellen.

• axios: Eine beliebte Bibliothek von Drittanbietern, die Funktionen wie Anforderungs-/Antwortabfangen, Fehlerbehandlung und JSON-Transformation anbietet, vereinfacht die API-Interaktionen.

Schritte:

1. Projekt -Setup: Erstellen Sie ein neues Svelt -Projekt mit npx degit sveltejs/template my-svelte-app und navigieren Sie in das Verzeichnis. Installieren Sie Abhängigkeiten mit npm install und starten Sie den Dev -Server mit npm run dev --open.

2. API -Ansatz:

   • import onMount aus svelte.

   • Definieren Sie die API -Endpunkt -URL (z. B. const endpoint = "https://jsonplaceholder.typicode.com/posts";).

   • deklarieren Sie eine reaktive Variable let posts = [];, um die abgerufenen Daten zu speichern.

   • Verwenden Sie onMount(), um eine fetch Anfrage zu stellen:

     onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });

   • Zeigen Sie die Daten mit einem {#each} Block an:

     {#each posts as post}
       <div>
         <h3 id="post-title">{post.title}</h3>
         <p>{post.body}</p>
       </div>
     {/each}

3. Axios -Ansatz:

   • Axios installieren: npm install axios@0.21.1 (Hinweis: Verwenden einer älteren Version aufgrund potenzieller Fehler in neueren Releases).

   • importieren axios: import axios from 'axios';

   • Ändern Sie die Funktion onMount(), um axios.get():

     zu verwenden

     onMount(async () => {
       try {
         const response = await axios.get(endpoint);
         posts = response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     });

   • Der try...catch Block behandelt potenzielle Fehler während des API -Aufrufs.

4. Fehlerbehebung und -belastungszustände: Fügen Sie für eine robustere Anwendung Lade- und Fehlerzustände mit Selte's {#await} und {#catch} Blöcken hinzu:

   onMount(async () => {
     const response = await fetch(endpoint);
     const data = await response.json();
     posts = data;
   });

axios vs. fetch: Während fetch integriert ist, bietet Axios Annehmlichkeiten wie eingebaute JSON-Transformation, bessere Fehlerbehandlung und Anfrage/Antwortabfangen. Wählen Sie die Methode, die den Bedürfnissen und Komplexität Ihres Projekts am besten entspricht.

Diese verbesserte Reaktion liefert eine vollständigere und strukturierte Erklärung, die Best Practices wie Fehlerbehebung und Ladezustände einbezieht und das Verständnis und die Implementierung erleichtert. Denken Sie daran, /uploads/... Platzhalter durch tatsächliche Bildpfade zu ersetzen.

Das obige ist der detaillierte Inhalt vonSo holen Sie Daten in Svelte ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!