vue3 在main.js中的axios请求拦截器响应拦截器添加ElLoading服务式工具函数

最新推荐文章于 2024-05-06 11:00:34 发布

漂亮小咪

最新推荐文章于 2024-05-06 11:00:34 发布

阅读量432

点赞数

文章标签： javascript 开发语言前端 vue

本文链接：https://blog.csdn.net/su_yun/article/details/130871714

版权

亲测有效亲测有效亲测有效亲测有效亲测有效亲测有效

在main.js中引入

不管你是自动导入还是全部导入

import {ElLoading} from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';

注册使用

app.use(ElLoading)

//开始加载loading
function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
//结束
function endLoading() {
    loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++
}

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

请求拦截器

axios.interceptors.request.use(config => {
    showFullScreenLoading()
    return config
})

响应拦截器

axios.interceptors.response.use(config => {
    tryHideFullScreenLoading()
    return config
})

亲测有效亲测有效亲测有效亲测有效亲测有效亲测有效亲测有效