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!