如何在Vue SPA中api请求完成之前添加加载器

<template>
  <div>
    <loader v-if="isLoading" />
    <!-- 其他组件内容 -->
  </div>
</template>

<script>
import Loader from '@/components/Loader.vue'; // 加载器组件

export default {
  components: {
    Loader,
  },
  data() {
    return {
      isLoading: false, // 控制加载器显示与隐藏的变量
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true; // 显示加载器

      // 发送api请求
      axios.get('/api/data')
        .then(response => {
          // 处理请求成功的逻辑
        })
        .catch(error => {
          // 处理请求失败的逻辑
        })
        .finally(() => {
          this.isLoading = false; // 隐藏加载器
        });
    },
  },
  created() {
    this.fetchData(); // 在created钩子函数中触发api请求
  },
};
</script>