axios vue 加载效果动画_Vue 页面加载数据之前增加 `loading` 动画

在Vue中使用Axios进行数据请求时，我们可以使用loading动画来增加页面的交互体验。具体实现如下：

1. 安装`axios`和`vue-spinner`依赖：

npm install axios vue-spinner --save

2. 在需要使用的组件中引入`axios`和`vue-spinner`：

import axios from 'axios';
import Spinner from 'vue-spinner/src/ScaleLoader.vue';

3. 在`data`中添加`loading`属性，并将其初始化为`false`：

data() {
  return {
    loading: false,
    // ...
  }
}

4. 在需要使用loading动画的方法中，首先将`loading`设为`true`，然后在请求完成后将其设为`false`：

methods: {
  fetchData() {
    this.loading = true;
    axios.get('/api/data').then(response => {
      // 处理数据
      this.loading = false;
    }).catch(error => {
      console.log(error);
      this.loading = false;
    });
  }
}

5. 在模板中使用`vue-spinner`来显示loading动画：

<template>
  <div>
    <spinner v-if="loading" color="#41b883" :size="100" :margin="10"></spinner>
    <!-- 显示数据的内容 -->
  </div>
</template>

<script>
import axios from 'axios';
import Spinner from 'vue-spinner/src/ScaleLoader.vue';

export default {
  components: {
    Spinner
  },
  data() {
    return {
      loading: false,
      // ...
    }
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data').then(response => {
        // 处理数据
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
      });
    }
  }
}
</script>

这样，在数据请求时，loading动画会显示，请求完成后动画消失。这样可以提高用户的交互体验，让页面更加友好。