Подробное объяснение проблемы направления this при использовании axios в vue

Введение

Известно, что axios появился после vue-resource как плагин для выполнения запросов к данным Vue. После обновления vue до версии 2.0, автор Юй Да заявил, что он больше не будет обновлять vue-resource, а вместо этого рекомендует использовать axios. Больше详细介绍 можно найти здесь: https://ru.oldtoolbag.com/article/109444.htm

Эта статьяmainly рассказывает о проблеме направления this при использовании axios вvue. Без дальнейших комментариев, давайте посмотрим на подробное описание.

1. Решение проблемы

При использовании axios для выполнения сетевых запросов вvue, может возникнуть проблема с тем, что this не указывает на vue, а становится undefined. Проблему можно решить с помощью стрелочных функций "=>". Вот как это можно сделать:

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); // здесь this = undefined
  });
  .catch((error)=> {
  console.log(error); // arrow функция "=>" изменяет this на vue
  });
 });
 }
} 

2. Причина

В ES6 arrow функции "=>" внутренний this является лексическим диапазоном, определяемым контекстом (то есть определяемым внешним вызывателем vue).

3. Внешние Remarks

Использование функции "=>" позволяет отказаться от предыдущих двух способов:

bind(this) для изменения направления this в анонимной функции

hack-написание var _this= this; ：

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); // здесь _this указывает на vue
 });
 });
 }

Резюме

Вот и все, что есть в этой статье, надеюсь, что содержимое статьи будет иметь определенную образовательную или профессиональную ценность для вас, если у вас есть вопросы, пожалуйста, оставляйте комментарии для обсуждения, спасибо за поддержку呐喊 руководства.

Объявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему владельцу, материалы предоставлены пользователями Интернета, сайт не имеет права собственности, не был редактирован вручную, и не несет ответственности за связанные с этим юридические обязательства. Если вы обнаружите спорное содержимое, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. В случае подтверждения нарушения, сайт немедленно удалит спорное содержимое.