Detaillierte Erläuterung der Vue + Axios-Anforderungsschnittstellenmethode und der Parameterübergabemethode

Front-End-Projekte, die mit Vue-Scaffolding erstellt wurden, verwenden normalerweise Axios-gekapselte Schnittstellenanforderungen. Die im Projekt eingeführten Methoden werden nicht im Detail vorgestellt. Dieser Artikel stellt hauptsächlich Schnittstellenaufrufe und verschiedene Formen von Methoden zur Parameterübergabe vor.

1. Anfrage erhalten:

Die Get-Anfrage ist relativ einfach. Normalerweise werden die Parameter in die URL eingebunden und mit ? & oder folgendermaßen verbunden:

dies.axios.get(dieses.getWxQyUserInfoUrl, {
Parameter: {
Agenten-ID: this.doLoginParams.agentid,
Code: dies.doLoginParams.code
}
})

2. Anfrage posten:

1) Methode zur Übertragung von Formulardaten-FormData-Parametern ① Axios-Konfiguration, Anforderungsheader festlegen: Header
Accept: text/plain, text/html - Gibt den Inhaltstyp an, den der Client empfangen kann
Content-Type: Content-Type: application/x-www-form-urlencoded – Die der angeforderten Entität entsprechenden MIME-Informationen werden im Allgemeinen wie folgt festgelegt:
this.axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Anforderungsheader konfigurieren //JSON-Format: 'application/json; charset=UTF-8'
Geben Sie den Inhaltstyp an, den der Client akzeptieren kann, normalerweise in der globalen Kapselungsanforderung: in main.js

axios.interceptors.request.use(Konfiguration => {
//Geben Sie den Inhaltstyp an, den der Client empfangen kann config.headers.Accept = "application/json, text/plain,*/*"
Konfiguration zurückgeben;
}, Fehler => Promise.error(Fehler)
)

Ähnlich wie beim Einrichten einer separaten Ausnahmebehandlung für Antworten:

axios.interceptors.response.use(Antwort => {
//Systemfehler gibt Antwort zurück;
}, Fehler => {
// Sie können den Anforderungsfehler nach Bedarf auf die Netzwerkausnahmeseite umleiten console.log("Die Hauptseite erfasst die Axios-Ausnahme: "+JSON.stringify(error));
// router.push({
// Pfad: "/networkerr",
// Name: "networkerr"
// });
})

② Führen Sie in der Kapselungsdatei der Anforderungsschnittstelle die qs-Middleware ein. Wenn die Anforderungsmethode gesendet wird, müssen die Parameter über die Funktion qs.stringify in das Format konvertiert werden
Das qs-Modul ist in Axios integriert und muss nicht heruntergeladen werden. Durch das Importieren des Kerns werden die Parameter direkt in eine standardmäßige globale Schlüsselwertreferenzmethode konvertiert: in main.js

 importiere qs von „qs“;
 Vue.prototype.$qs = qs;

Dann können Sie this.$qs.stringify(params) direkt auf jeder Seite verwenden, um eine einzelne Seitenreferenz zu verwenden:

var qs = erfordern('qs');
dies.axios.post(diese.postUrl,qs.stringify({"Wert1":100,"Wert2":"123"}))

2) Methode zum Übergeben von JSON-String-Parametern ① Axios-Konfiguration, legen Sie den Anforderungsheader fest: Head

this.axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'; //Anforderungsheader konfigurieren

② Die Konvertierung der Request-Parameter erfolgt über die Funktion SON.stringify() oder kann ohne Konvertierung direkt übergeben werden.

dies.axios.post(dieses.imageSaveUrl, JSON.stringify(params))

3. Erweiterung und Ergänzung

Fügen Sie abschließend die Einstellung der Webservice-Schnittstelle hinzu, um die Antwort direkt im JSON-Format statt im XML-Format zurückzugeben:
Ändern Sie die Art und Weise, wie Daten zurückgegeben werden. Verwenden Sie Context.Response.Write anstelle der return-Anweisung. Sie können Daten dann wie folgt im JSON-Format zurückgeben:

Context.Response.Charset = "utf-8"; //Zeichensatztyp oder GB2312 festlegen
Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //oder System.Text.Encoding.GetEncoding("GB2312");
Kontext.Antwort.Schreiben(jaoData);
Kontext.Antwort.Ende();

Dies ist das Ende dieses Artikels über die Methoden- und Parameterübergabe der Vue + Axios-Anforderungsschnittstelle. Weitere verwandte Inhalte zur Vue Axios-Anforderungsschnittstelle 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!