Les requêtes Ajax et les packages axios sont parfaitement gérés dans vue

Cette fois je vais vous apporter le traitement parfait des requêtes ajax et des packages axios en vue. Quelles sont les précautions pour gérer les requêtes ajax et les packages axios en vue. Voici des cas pratiques, 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 post request

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 une demande

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

•demander une 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, 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 aux instructions.

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é, sinon .catch sera exécuté

Ces deux

fonctions de rappel ont leurs propres portées indépendantes, si elles sont accessibles directement à l'intérieur de celui-ci, l'instance Vue n'est pas accessible

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

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Node implémente la fonction de code de vérification d'image lors de la connexion

Le composant parent vue transmet la valeur à le composant parent Explication détaillée des étapes

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!