Ajax-Anfragen und Axios-Pakete werden in Vue perfekt verarbeitet

Dieses Mal werde ich Ihnen die perfekte Verarbeitung von Ajax-Anfragen und Axios-Paketen in Vue vorstellen. Was sind die Vorsichtsmaßnahmen für die Verarbeitung von Ajax-Anfragen und Axios-Paketen in Vue? .

In Vue werden häufig Datenanfragen verwendet: vue-resource, axios

Heute spreche ich über die Post-Anfrage von Axios

Github-Quelldatei- und Dokumentadresse: [https://github.com/axios/axios]

+ Stellen Sie zunächst Axios vor

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入：import axios from 'axios';

•Anfrage abrufen

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: Konfigurationsaxios

In der oben genannten gekapselten Methode werden drei Konfigurationselemente von Axios verwendet. Die vollständige API finden Sie in der Anleitung

Praktischerweise verfügt Axios auch über Aliase für jede Methode. 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 Ist erfolgreich, wird .then ausgeführt, andernfalls wird .catch ausgeführt

Diese beiden Rückruffunktionen haben ihre eigenen unabhängigen Bereiche. Wenn Sie direkt darauf zugreifen, können Sie nicht auf die Vue-Instanz zugreifen

Zu diesem Zeitpunkt fügen Sie einfach eine .bind(this)-Datei hinzu, um dieses Problem zu lösen

.then(function(res){
 console.log(this.data)
}.bind(this))

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Knoten implementiert die Bildverifizierungscode-Funktion während der Anmeldung

Die übergeordnete Vue-Komponente übergibt den Wert an die übergeordnete Komponente Detaillierte Erläuterung der Schritte

Das obige ist der detaillierte Inhalt vonAjax-Anfragen und Axios-Pakete werden in Vue perfekt verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!