调用接口时就自动loading （全局）

可以通过在调用接口前显示loading，接口请求结束后隐藏loading的方法来实现这个功能。

比如可以在每次调用接口前，显示一个全局的loading组件，用于提醒用户数据正在加载中。在接口请求结束后，隐藏这个loading组件。

具体实现方式可以先在项目的全局设置里定义一个loading组件，并在调用接口前显示它，然后通过拦截器来监听接口请求状态变化，在接口请求成功或失败后将loading组件隐藏。

// 在项目全局定义loading组件

<template>
  <div class="loading" v-show="isLoading">
    <svg viewBox="0 0 32 32" width="32" height="32" fill="#333">
      <circle transform="translate(8 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
      <circle transform="translate(16 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
      <circle transform="translate(24 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
    },
    hideLoading() {
      this.isLoading = false
    }
  }
}
</script>

// 在拦截器中监听接口请求状态变化

import loading from './loading.vue'

// 请求拦截器
axios.interceptors.request.use((config) => {
  loading.methods.showLoading() // 显示loading组件
  return config
}, (error) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use((response) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return response
}, (error) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return Promise.reject(error)
})

这样每次调用接口前都会显示loading组件，让用户知道数据正在加载中，等到接口请求结束后，loading组件就会隐藏，让用户看到完整的内容。