Maison > interface Web > js tutoriel > Comment faire fonctionner la requête ajax et le package axios

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

php中世界最好的语言
Libérer: 2018-06-07 11:18:04
original
1690 Les gens l'ont consulté

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';
Copier après la connexion

•obtenir la demande

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
Copier après la connexion

•poster la demande

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

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)
Copier après la connexion

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

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})
Copier après la connexion

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))
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal