So verwenden Sie Ajax-Anfragen und Axios-Pakete in Vue

Dieses Mal zeige ich Ihnen, wie Sie Ajax-Anfragen und Axios-Pakete in Vue verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax-Anfragen und Axios-Paketen in Vue?

+ Zuerst Axios vorstellen

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: Axios konfigurieren

In der oben gekapselten Methode werden tatsächlich drei Konfigurationselemente von Axios verwendet , Die vollständige API finden Sie in der Gebrauchsanweisung

Der Einfachheit halber verfügt Axios auch über Aliase für jede Methode. Die obige Methode saveForm entspricht beispielsweise:

axios.post('/user', context.state.test02)

Vollständig Die 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

Beide Callback-Funktionen wird ausgeführt Jeder hat einen unabhängigen Bereich. Wenn Sie direkt darauf zugreifen, können Sie nicht auf die Vue-Instanz zugreifen

Zu diesem Zeitpunkt müssen Sie nur eine .bind(this) hinzufügen, um dieses Problem zu lösen

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

Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Vue-Quellcode, um den Ereignismechanismus zu analysieren

Wie man JS betreibt, um das zu erhalten Stadt und geografischer Standort des Benutzers

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