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在箭头功能和常规功能上有很大不同，因此请参考When should I use Arrow functions in ECMAScript 6?以更好地理解。

如何从Vue中创建的axios函数访问属性

2 个答案: