So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense

Vorwort

Vue3 hat viele auffällige Funktionen hinzugefügt, und die Suspense-Komponente ist eine davon. Sie ist sehr praktisch für die Verarbeitung asynchroner Anforderungsdaten. Dieser Artikel stellt ihre Verwendung anhand einfacher Beispiele vor. Wenn Sie daran interessiert sind, können Sie die offizielle Dokumentation zu Rate ziehen.

Es kommt häufig vor, dass Komponenten eine Art asynchrone Anfrage ausführen müssen, bevor sie korrekt gerendert werden können. Dies wird normalerweise durch einen Mechanismus gehandhabt, den die Entwickler zu diesem Zweck entwickeln. Es gibt viele gute Möglichkeiten, dies zu tun.

Wenn Sie beispielsweise asynchron Daten von einer API abrufen und beim Parsen der Antwortdaten einige Informationen anzeigen möchten, etwa einen Ladeeffekt, können Sie zur Erfüllung solcher Anforderungen die Suspense-Komponente in Vue3 verwenden.

Komponenten erstellen

Erstellen Sie eine Komponente und nennen Sie sie Peoples.vue. Der Komponentencode lautet wie folgt:

<Vorlage>
    <div v-for="(Personen, Index) in Personen.Ergebnisse" :key="Index">
        {{ Personen.Name }} {{ Personen.Geburtsjahr }}
    </div>
</Vorlage>
<Skript>
importiere { ref } von "vue";
Standard exportieren {
    Name: "CyPeoples",
    asynchrones Setup () {
        const Völker = ref(null);
        const headers = { "Inhaltstyp": "application/json" };
        const fetchPeoples = warte auf fetch("https://swapi.dev/api/people", {
            Überschriften,
        });
        peoples.value = warte auf fetchPeoples.json();
        Rückkehr { Völker };
    },
};
</Skript>

Um die Reaktivität des Komponentenzustands sicherzustellen, wird hier ein Ref eingeführt. Gemäß dem obigen Codeausschnitt werden die Filmdaten also über einen asynchronen API-Aufruf abgerufen.
Zum Initiieren von HTTP-Anfragen in VUE-Projekten wird normalerweise Axios verwendet. Hier versuchen wir, fetch zu verwenden.

Ok, verwenden wir jetzt Suspense, um Ladeinformationen in der Anwendung anzuzeigen.

Ändern Sie die Datei App.vue, um den Code wie folgt zu erstellen:

<Vorlage>
    <div>
        <h1>Star Wars Charaktere</h1>
    </div>
    <Spannung>
        <Vorlage #Standard>
            <CyPeoples />
        </Vorlage>
        <Vorlage #fallback>
            <div>
                <h3>Daten werden geladen...</h3>
            </div>
        </Vorlage>
    </Spannung>
</Vorlage>
<Skript>
importiere CyPeoples aus "./components/Peoples.vue";
importiere {Spannung} von "vue";
Standard exportieren {
    Name: "App",
    Komponenten:
        CyPeoples,
        Spannung,
    },
};
</Skript>

Aus dem obigen Codeausschnitt geht hervor, dass der Ladeeffekt problemlos mithilfe der Suspense-Komponente erzielt werden kann, wobei #default als Initialisierungsvorlagenkomponente zum Anzeigen der Benutzeroberfläche nach Abschluss der asynchronen Anforderung verwendet wird. Der #Fallback ist die Verarbeitungs-Benutzeroberfläche in der asynchronen Anforderung, die den allgemeinen Ladeeffekt darstellt.

Zusammenfassen

Die Suspense-Komponente ist eine neue Funktion von Vue3, die die Verarbeitungslogik der asynchronen Anforderungs-UI vereinfacht.

Dies ist das Ende dieses Artikels über die Spannung der Vue3-Komponente zum asynchronen Laden von Daten. Weitere verwandte Inhalte zur Spannung der Vue3-Komponente zum asynchronen Laden von Daten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!