当前位置：首页 > news >正文

vue + elementui 全局Loading效果

news 2025/7/10 2:47:26

注：在request请求和响应封装的文件里引入loading，发请求时打开loading，响应时关闭loading，这样每个接口调用时都会有loading效果

（1）首先确保项目中安装了element-ui这个依赖包

npm i element-ui -S

（2）引入Loading

import { Loading } from 'element-ui'

（3）使用

let globalLoading   // 定义loading

 // 添加loading效果globalLoading = Loading.service({lock: true,text: '加载中…',background: 'rgba(0, 0, 0, 0.7)'})

globalLoading.close()  // 响应-关闭loading

完整代码如下：

import axios from 'axios'
import { Loading } from 'element-ui'
import { Notification } from 'element-ui'
import { getToken } from '@/utils/auth'// loading设置
let globalLoading// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 30000
})
// request拦截器
service.interceptors.request.use(config => {// 请求加loadingglobalLoading = Loading.service({lock: true,text: '加载中…',background: 'rgba(0, 0, 0, 0.7)'})// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}return config
}, error => {console.log(error)Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use(res => {globalLoading.close()  // 响应-关闭loading// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = res.data.msgif(code==200 || code == 201 || code == 202 ){return res.data;} else if (code !== 200) {Notification.error({title: msg})return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)return Promise.reject(error)}
)export default service