Как получить доступ к свойству из функции axios в Vue

Question

Я хочу использовать Axios interceptors, чтобы показать мой компонент загрузчика, пока Axios выполняет запрос. В свой корневой компонент я поместил эти interceptors в функцию created(). В этом компоненте у меня также есть свойство с именем isLoading, которое установлено на false. Когда запрос сделан, я хочу установить его на true. Но когда я пытаюсь получить доступ к свойству, он говорит:

TypeError: Невозможно прочитать свойство isLoading из неопределенного

Почему я не могу получить доступ к isLoadingсвойство внутри функции Axios? Это мой компонент:

<template>
  <v-app>
    <AppBar />
    <router-view/>
    <Loader v-if="isLoading"></Loader>
  </v-app>
</template>

<script>
import AppBar from '../components/AppBar';
import Loader from '../components/Loader';
import axios from 'axios';

export default {
  name: "App",
  components: {
    AppBar,
    Loader
  },
  data() {
    return {
      isLoading: false
    }
  },
  created() {
    axios.interceptors.request.use(function (config) {

      this.isLoading = true;

        return config;
      }, function (error) {
        this.isLoading = false;
        return Promise.reject(error);
      });

    axios.interceptors.response.use(function (response) {
        this.isLoading = false;

        return response;
      }, function (error) {
        return Promise.reject(error);
      });
  }
};
</script>

Answer 1

Ваши замыкания используют собственный контекст this, который НЕ является тем контекстом, который вам нужен. Замените их на функции стрелок, подобные этой, чтобы получить доступ к контексту this включающей области (то есть, к состоянию вашего компонента):

axios.interceptors.request.use((config) => {
    this.isLoading = true;
    return config;
}, (error) => {
    this.isLoading = false;
    return Promise.reject(error);
});

Answer 2

Слово this всегда относится к непосредственному объему. При использовании его внутри функции из объекта axios он теряет ссылку на ваш компонент. Решение состоит в том, чтобы просто захватить эту ссылку в новой переменной

  created() {
    var vm = this;
    axios.interceptors.request.use(function (config) {

      vm.isLoading = true;

        return config;
      }, function (error) {
        vm.isLoading = false;
        return Promise.reject(error);
      });

    axios.interceptors.response.use(function (response) {
        vm.isLoading = false;

        return response;
      }, function (error) {
        return Promise.reject(error);
      });
  }

Поскольку this обрабатывается очень по-разному в стрелке и в обычных функциях, обратитесь к Когда мне следует использовать функции стрелки в ECMAScript 6? для лучшего понимания.