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

Node.js implementiert die Wiederaufnahme von Haltepunkten

Inhaltsverzeichnis Lösungsanalyse Scheibe Lebensl...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

So kapseln Sie Axios einfach in Vue

Axios in Vue einfügen importiere Axios von „Axios...

Detaillierte Erklärung des DOM DIFF-Algorithmus in der React-Anwendung

Inhaltsverzeichnis Vorwort Was ist VirtualDOM? Gr...

Das Flex-Layout realisiert den Layoutmodus mit festem oberen und unteren und gleitendem mittleren

In diesem Artikel wird hauptsächlich die Layoutme...

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux

1. Server-Setup Das Remote-Repository unterscheid...

Mysql Sql-Anweisungsübungen (50 Fragen)

Tabellenname und Felder –1. Studentenliste Studen...

JavaScript realisiert den Drag-Effekt der Modalbox

Hier ist ein Fall des Ziehens einer modalen Box. ...

Allgemeine Front-End-JavaScript-Methodenkapselung

Inhaltsverzeichnis 1. Geben Sie einen Wert ein un...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner auss...

Designtheorie: Eine Methode, um die Herzen der Menschen zu verstehen

<br />Einmal unterhielten sich Foyin und Her...

Der Unterschied zwischen shtml und html

Shtml und asp sind ähnlich. In Dateien mit dem Nam...

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Was ist JConsole JConsole wurde in Java 5 eingefü...

Unterschiede zwischen proxy_pass in zwei Modulen in nginx

1. Die proxy_pass -Direktive des Moduls 1.ngx_str...