Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

1. Zuerst erstellen wir eine JSON-Datei zur interaktiven Nutzung. Wir listen das JSON-Datenformat auf und simulieren die Übergabe an das Frontend, damit unsere Freunde es besser verstehen.

{
  "Name": "Gesalzener Fisch_umdrehen",
  "URL": "https://blog.csdn.net/aaa123_456aaa",
  "Seite": 1,
  "Adresse": {
    "Straße": "Bezirk Xiangqiao",
    "Stadt": "Stadt Chaozhou",
    "Land": "China"
  },
  "Links": [
    {
      "Name": "Gesalzener Fisch_Umdrehung 1",
      "URL": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "Name": "Gesalzener Fisch_Umdrehung 2",
      "URL": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "Name": "Gesalzener Fisch_Umdrehen 3",
      "URL": "https://blog.csdn.net/aaa123_456aaa"
    }
  ]
}

Denken Sie daran, Ihre Umgebung zu überprüfen. Sie müssen hier die Unterstützung von ES6 auswählen.

Bildbeschreibung hier einfügen

2. Als Nächstes erstellen wir eine HTML-Datei und verwenden die asynchrone Kommunikation von Axios, um die Datenkommunikation zu realisieren.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="vue">
    <div>
        {{info.name}}
        {{info.Adresse}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<Skripttyp="text/javascript">
    var vm = neuer Vue({
        el: "#vue",
        // Hinweis: * Daten sind global und in großen Projekten können sie leicht verunreinigt werden* Kapseln Sie die Daten in eine Funktion. Beim Instanziieren der Komponente rufen wir einfach die von dieser Funktion generierte Datenkopie auf, um eine Datenverunreinigung zu vermeiden. Ich werde es hier nicht als Erklärung schreiben.
        Daten(){
            zurückkehren {
                // Das Format des Anforderungsrückgabeparameters sollte mit dem der JSON-Zeichenfolge übereinstimmen, was standardmäßiger ist. Natürlich kann es direkt leer sein.
                Info:
                    Name: null,
                    Adresse:{
                        Straße: null,
                        Stadt: null,
                        Land: null
                    },
                }
            }
        },
        mounted(){//Hook-Funktion, d. h., wenn das Programm ausgeführt wird, kann sie zur Ausführung in die Mitte des Programms eingefügt werden //Kettenprogrammierung, denken Sie daran, die ES6-Supportversion zu verwenden axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</Skript>
</body>
</html>

Laufergebnisse:

Bildbeschreibung hier einfügen

3. Natürlich handelt es sich bei dem oben Gesagten um eine relativ standardmäßige Schreibweise, also kürzen wir es ab:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="vue">
    <div>
        {{info.name}}
        {{info.Adresse}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<Skripttyp="text/javascript">
    var vm = neuer Vue({
        el: "#vue",
        // Hinweis: Hier ist data:{}, aber es muss ein Originalparameter info darin enthalten sein, und dann werden die von axios erhaltenen Daten an info gebunden // data ist ein Attribut, und der Attributwert kann ein Objekt oder eine Funktion sein. Funktionen sind im Wesentlichen Objekte. Vue beurteilt den Typ der Datenattribute und verwendet unterschiedliche Verarbeitungsmethoden data: {
            Info:{}
            },
        montiert(){
            axios.get('../data.json').then(Antwort=>(this.info=Antwort.data))
        }
    });
</Skript>
</body>
</html>

Laufergebnisse:

Bildbeschreibung hier einfügen

4. Wir müssen auf die Interaktion mit der URL achten, da v-bind zum Binden des Werts verwendet wird.

<div id="vue" v-Uhr>
    <div>
        {{info.name}}
        {{info.Adresse}}
        <a v-bind:href="info.url">Klicken Sie hier, um mein Blog aufzurufen</a>
    </div>
</div>

Klicken Sie hier, um zu springen. Interessierte Freunde können uns folgen!

Bildbeschreibung hier einfügen

5. Tipps

Einige Freunde haben möglicherweise ein schlechtes Netzwerk und Sie werden feststellen, dass während des Seitenladevorgangs zuerst eine Vorlage geladen wird. Dies hängt mit dem Lebenszyklus von Vue zusammen:

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Manche von Ihnen finden das vielleicht hässlich, deshalb hier eine Lösung, damit es in diesem Moment weiß wird, anstatt zuerst die Vorlage anzuzeigen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        /*<!--v-clock: Lösen Sie das Flackerproblem-->*/
        [v-Uhr]
            Anzeige: keine;
        }
    </Stil>
</Kopf>
<Text>
<!--Eine virtuelle Uhr anpassen-->
<div id="vue" v-Uhr>
    <div>
        {{info.name}}
        {{info.Adresse}}
    </div>
</div>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Lösen Sie das Problem der domänenübergreifenden Axios-asynchronen Kommunikation von Vue
  • Basierend auf der Verwendung von Axios in Vue
  • Detaillierte Erklärung der Verwendung von Axios in Vue
  • Detaillierte Erklärung der asynchronen Kommunikation von Axios in Vue

<<:  So speichern Sie „false“ oder „true“ in MySQL

>>:  Zusammenfassung der praktischen Erfahrungen zu HTML-Wissenspunkten

Artikel empfehlen

So erweitern Sie die Festplattengröße einer virtuellen Maschine

Nachdem Vmvare die Festplattengröße der virtuelle...

Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18

MySql herunterladen 1. Öffnen Sie die offizielle ...

Detaillierte Beschreibung der Unicode-Signatur-BOM

Unicode-Signatur-BOM – Was ist die BOM? BOM ist di...

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Inhaltsverzeichnis Einführung Herunterladen und i...

Detaillierte Erklärung zur Verwendung von css-vars-ponyfill in der IE-Umgebung (nextjs-Build)

CSS-Vars-Ponyfill Bei der Verwendung von CSS-Vari...

Implementierung einer benutzerdefinierten Vue-Vorlage von vscode

Verwenden Sie den Vscode-Editor, um eine Vue-Vorl...

Tutorial zur Installation von Linux-JDK und zur Konfiguration von Umgebungsvariablen (jdk-8u144-linux-x64.tar.gz)

Es wird empfohlen, zunächst mit dem Befehl sudo s...

Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel

Inhaltsverzeichnis Was ist JSONP JSONP-Prinzip JS...

Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

Inhaltsverzeichnis 1. Ziehen Sie das Centos-Image...

Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode

Im offiziellen Dokument heißt es: Durch Einfügen ...

So aktivieren Sie die JMX-Überwachung über Tomcat

Erstellen Sie eine Simulationsumgebung: Betriebss...

MySQL Serie 3 Grundlagen

Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...

Tutorial zum Erstellen eines SVN-Servers mit Docker

SVN ist die Abkürzung für Subversion, ein Open-So...

Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen

Problem: Die über IIS veröffentlichte Website wir...

Eine kurze Analyse der Verwendung von watchEffect in Vue3

Vorwort Jeder sollte mit der Watch-API in vue2 ve...