Spiegazione dettagliata del problema di inizializzazione di this quando si utilizza axios in vue

Introduzione

È noto che axios è un plugin per richiedere dati Vue che è apparso dopo vue-resource. Dopo l'aggiornamento di Vue a 2.0, l'autore Youda ha annunciato che non avrebbe più aggiornato vue-resource, ma avrebbe raccomandato axios. Per ulteriori dettagli, consultare qui: https://it.oldtoolbag.com/article/109444.htm

Questo articolo introduce il problema di inquadramento di this quando si utilizza axios in Vue. Non c'è molto da dire, quindi vediamo insieme la presentazione dettagliata.

1. Soluzione

Quando si utilizza axios in Vue per fare richieste di rete, si può incontrare il problema che this non si riferisce a Vue ma a undefined. È possibile risolvere il problema utilizzando la funzione arrow "=>". Ecco come fare:

metodi: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); // qui this = undefined
  });
  .catch((error)=> {
  console.log(error); // La funzione "=>" fa riferimento a vue
  });
 });
 }
} 

2. Ragione

Nell'ES6, la funzione "=>" degli arrow function ha un contesto legale, determinato dal chiamante esterno (cioè dal chiamante esterno vue).

3. Parola in più

Usare la funzione "=>" per dire addio alle precedenti due scritture:

usare bind(this) per modificare il riferimento this dell'funzione anonima

Hack di scrittura var _this= this; :

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); // qui _this si riferisce a vue
 });
 });
 }

Sommario

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo abbia un valore di riferimento per lo studio o il lavoro di tutti. Se hai domande, puoi lasciare un messaggio per scambiare opinioni, grazie per il supporto di tutti al tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.