Heim > Artikel > Web-Frontend > So bedienen Sie die Ajax-Anfrage und das Axios-Paket
Dieses Mal zeige ich Ihnen, wie Sie Ajax-Anfragen und Axios-Pakete bedienen und welche Vorsichtsmaßnahmen für den Betrieb von Ajax-Anfragen und Axios-Paketen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
In Vue werden häufig Datenanfragen verwendet: vue-resource, axios
Heute spreche ich über Axios-Post-Anfrage
Github-Quelldatei- und Dokumentadresse: [https://github.com/axios/axios]
+ Zuerst Axios vorstellen
CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import axios from 'axios';
•get Anfrage
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
•Anfrage posten
依赖于qs包,将对象转换成以&连接的字符串 //例: axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) { console.log(response); })
Anhang: Axios konfigurieren
In Für die oben gekapselte Methode werden drei Konfigurationselemente von Axios verwendet. Die vollständige API finden Sie in der Gebrauchsanweisung.
Der Einfachheit halber gibt Axios auch Aliase für jede Methode an . Die obige saveForm-Methode entspricht beispielsweise:
axios.post('/user', context.state.test02)
Die vollständige Anfrage sollte auch .then und .catch enthalten
.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })
Wenn die Anfrage erfolgreich ist, wird .then ausgeführt, andernfalls .catch
Diese beiden Rückruffunktionen haben ihre eigenen unabhängigen Bereiche. Wenn Sie direkt darauf zugreifen, können Sie nicht auf die Vue-Instanz zugreifen
In diesem Fall fügen Sie einfach eine .bind(this) hinzu Lösen Sie dieses Problem
.then(function(res){ console.log(this.data) }.bind(this))
Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So bedienen Sie den Echarts-Knoten, um dynamische Daten anzuzeigen
Verwenden Sie den Modifikator vue+.sync im Projekt
Das obige ist der detaillierte Inhalt vonSo bedienen Sie die Ajax-Anfrage und das Axios-Paket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!