Comment utiliser la requête ajax et le package axios dans vue

Cette fois, je vais vous montrer comment utiliser les requêtes ajax et les packages axios dans vue. Quelles sont les précautions lors de l'utilisation des requêtes ajax et des packages axios dans vue. Voici des cas pratiques, jetons un coup d'œil.

+ 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';

•get request

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

•demande de publication

 依赖于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, axios est utilisé De pour les trois éléments de configuration, seule l'URL est effectivement requise. Pour l'API complète, veuillez vous référer au mode d'emploi

Pour plus de commodité, axios a également des alias pour chaque méthode. 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)
})

Lorsque la requête réussit, .then sera exécutée, sinon .catch

sera exécuté Les 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

Dans ce cas, ajoutez simplement un .bind(this. ) pour 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 chinois de php !

Lecture recommandée :

Comment utiliser le code source de vue pour analyser le mécanisme d'événement

Comment utiliser JS pour obtenir le ville et situation géographique de l'utilisateur

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!