Maison  >  Article  >  interface Web  >  Les requêtes Ajax et les packages axios sont parfaitement gérés dans vue

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

php中世界最好的语言
php中世界最好的语言original
2018-04-27 16:09:511949parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn