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!