Análisis detallado del problema de la dirección this al usar axios en vue

Introducción

Es bien conocido que axios es un paquete de solicitud de red utilizado en vue-resource después de la aparición del complemento de solicitud de datos Vue. Vue se actualizó a2.0, el autor You Da anunció que ya no proporcionará soporte para vue-resource no se actualiza, sino que se recomienda axios. Para más detalles, consulte aquí: https://es.oldtoolbag.com/article/109444.htm

Este artículo introduce principalmente el problema de la dirección de this al usar axios en vue. No hay mucho más que decir, vamos a ver la introducción detallada juntos.

1.Solución

Al usar axios para realizar solicitudes de red en vue, puede ocurrir que this no apunte a vue sino a undefined. Puede solucionarse utilizando la función flecha "=>". Vea el siguiente ejemplo:

métodos: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  nombre de usuario: this.username,
  contraseña: this.password
 });
  .then(function(response){
  console.log(this); //Aquí this = undefined
  });
  .catch((error)=> {
  console.log(error); //La función flecha "=>" hace que this apunte a vue
  });
 });
 }
} 

2. Razón

ES6La función flecha "=>" tiene un ámbito léxico, determinada por el contexto (es decir, determinada por el llamador externo vue).

3. Palabra aparte

Con "=>" puede despedirse de las dos formas anteriores de escritura:

usar "=>" para cambiar la dirección de this en la función anónima

Escribir hack var _this= this; ：

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

Resumen

Eso es todo el contenido de este artículo, espero que el contenido de este artículo tenga cierta valoración de referencia para su aprendizaje o trabajo. Si tienen alguna pregunta, pueden dejar comentarios para intercambiar, gracias por el apoyo a la tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.