Comment faire fonctionner la requête ajax et le package axios

Cette fois, je vais vous montrer comment faire fonctionner les requêtes ajax et les packages axios, et quelles sont les précautions à prendre pour faire fonctionner les requêtes ajax et les packages axios. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Dans vue, les requêtes de données sont souvent utilisées. Les plus couramment utilisées sont : vue-resourse, axios

Aujourd'hui, je parle de la requête de publication axios

Fichier source github et adresse du document : [https://github.com/axios/axios]

+ Tout d'abord, présentez axios

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

•obtenir la demande

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

•poster la demande

 依赖于qs包，将对象转换成以&连接的字符串
//例：
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})

Annexe : Configuration d'axios

Dans la méthode encapsulée ci-dessus, trois éléments de configuration d'axios sont utilisés. En fait, seule l'url est requise pour l'API complète, veuillez vous référer au mode d'emploi

Pour plus de commodité, axios. fournit également chaque Cette méthode a un alias. Par exemple, la méthode saveForm ci-dessus est équivalente à :

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

La requête complète doit également inclure .then et .catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

When la requête réussit, elle exécutera .then, sinon exécutera .catch

Ces deux fonctions de rappel ont leurs propres portées indépendantes Si vous y accédez directement à l'intérieur, vous ne pouvez pas accéder à l'instance Vue

. Pour le moment, ajoutez simplement un .bind(this) peut résoudre ce problème

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser le nœud echarts pour afficher des données dynamiques

Utiliser le modificateur vue+.sync dans le projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!