【Vue+Element UI】关闭指定某一个页面的loading动画

【Vue+Element UI】关闭指定某一个页面的loading动画

模板：vue-admin-template v4.4.0

问题描述：由于vue-admin默认配置了全局loading，所以页面刷新都会有loading加载动画，具体显示效果如下：

但实际中需要在某一个页面中定时请求接口、刷新页面数据，在使用setInterval()定时器后，页面在每次请求接口后会出现loading加载动画。故需要关闭该页面的加载动画。

过程：查到的大部分博客的关注点都在于如何开启loading动画的全局设置或局部设置，没有查到关闭loading动画的例子。所以将前端所有文件都检查了一遍，将设置loading的文件锁定在了'./src/utils/request.js'。

结果：未能关闭指定单个页面的loading动画，所以关闭了全局的loading动画。request.js代码如下：

let loading        //定义loading变量

function startLoading() {    //使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '拼命加载中',
    spinner: "el-icon-loading",
    background: 'rgba(0, 0, 0, 0.8)'
  })
}
function endLoading() {    //使用Element loading-close 方法
  loading.close()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers.token = getToken()
      // config.headers.contentType="application/json;charset=utf-8"
    }
    // showFullScreenLoading() //注释掉，即可关闭全局的loading动画。
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

修改部分为倒数第九行，将showFullScreenLoading()注释掉即可。

the end.