vue+element ui实现全局loading

最新推荐文章于 2025-05-17 08:25:55 发布

原创最新推荐文章于 2025-05-17 08:25:55 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue+element-ui 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在前端使用Ajax请求时实现全局Loading效果，以防止用户在数据加载过程中点击其他按钮。通过引入Element-UI库的Loading组件，定义了开始和结束Loading的方法，并在请求拦截器中进行调用，确保所有请求完成后关闭Loading。同时，针对请求错误状态如401、404等进行了处理，提供友好的用户反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景

场景：前端在发送Ajax请求，请求后台数据时，不允许用户点击当前页面的其他按钮。

引入loading

import { Loading } from 'element-ui'

定义全局loading

// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
function startLoading() {
  loading = Loading.service({
    fullscreen: true,
    background: 'rgba(0, 0, 0, 0)'
  })
}
function endLoading() {
  loading.close()
}
// 声明一个对象用于存储请求个数
let needLoadingRequestCount = 0
function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}
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, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 30000 // request timeout
})
let checkToken = true
// request interceptor 请求拦截器
service.interceptors.request.use(
  config => {
    showFullScreenLoading()
    let token = store.getters.token
    const diedTime = store.getters.diedTime
    const refreshTime = store.getters.refreshTime
    if (token) {
      let tmp = Date.parse(new Date()).toString()
      tmp = tmp.substr(0, 10)
      if (tmp >= refreshTime && tmp < diedTime && checkToken) {
        checkToken = false
        getToken().then(res => {
          checkToken = true
          store.commit('user/SET_TOKEN', res.data.token)
          store.commit('user/SET_DIEDTIME', res.data.died_time)
          store.commit('user/SET_REFRESHTIME', res.data.refresh_time)
          token = store.getters.token
        })
      } else if (tmp >= diedTime) {
        tryHideFullScreenLoading()
        store.commit('user/DEL_TOKEN')
        router.replace({
          path: '/login'
        })
      }
      config.headers.Authorization = token // 请求头部添加token
    }
    return config
  },
  error => {
    tryHideFullScreenLoading()
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    tryHideFullScreenLoading()
    const code = response.status
    if ((code >= 200 && code < 300) || code === 304) {
      return Promise.resolve(response.data)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    tryHideFullScreenLoading()
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回401 清除token信息并跳转到登陆页面
          Message.error('签名认证已过期，请重新登录！')
          router.replace({
            path: '/login',
            query: {
              redirect: '/product-list'
            }
          })
          break
        case 404:
          Message.error('网络请求不存在')
          break
        case 422:
          Message.error('您的账号已被删除，请联系系统管理员确认情况！')
          router.replace({
            path: '/login',
            query: {
              redirect: '/product-list'
            }
          })
          break
        case 500:
          Message.error('网站后台请求错误')
          break
        default:
          Message.error(error.response.data.message)
      }
    } else {
      // 请求超时或者网络有问题
      if (error.message.includes('timeout')) {
        Message.error('请求超时！请检查网络是否正常')
      } else {
        Message.error('请求失败，请检查网络是否已连接')
      }
    }
    return Promise.reject(error)
  }
)