Détails sur le problème de l'orientation de this lors de l'utilisation d'axios dans vue

Préambule

Comme nous le savons tous, axios est une bibliothèque pour vue-resource après l'apparition des plugins de requêtes de données Vue. Vue est mise à jour à2.0 après, l'auteur You Da a déclaré qu'il ne continuera plus à maintenir vue-resource n'est pas mis à jour, mais recommande axios. Pour plus de détails, vous pouvez consulter ici : https://fr.oldtoolbag.com/article/109444.htm

Cet article présente principalement le problème de la direction de this lors de l'utilisation d'axios dans vue. Sans plus attendre, regardons ensemble une présentation détaillée.

1.Solution

Lorsque vous utilisez axios pour effectuer des requêtes réseau dans vue, vous pourriez rencontrer le problème où this ne pointe pas vers vue mais vers undefined. Vous pouvez résoudre ce problème en utilisant les fonctions fléchées "=>". Voici comment faire :

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); //Ici this = undefined
  });
  .catch((error)=> {
  console.log(error); //Les fonctions fléchées "=>" font pointer this vers vue
  });
 });
 }
} 

2. Raison

ES6Les fonctions fléchées "=>" internes sont de portée lexical, déterminées par le contexte (c'est-à-dire déterminées par l'appelant externe vue).

3. Hors sujet

En utilisant la fonction "=>", vous pouvez dire adieu aux deux méthodes précédentes :

bind(this) pour changer le pointeur this de la fonction anonyme

Hack de écriture var _this= this; ：

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //Ici _this pointe vers vue
 });
 });
 }

Résumé

Voici la fin de cet article, j'espère que le contenu de cet article a une certaine valeur de référence pour votre apprentissage ou votre travail. Si vous avez des questions, vous pouvez laisser des messages pour échanger, merci de votre soutien au tutoriel d'alarme.

Déclaration : le contenu de cet article est issu d'Internet, propriété de ses auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet de manière volontaire et téléversé, ce site ne détient pas de droits de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)