1.首先创建一个loading.js文件

import { Loading } from 'element-ui';

let loading;
function startLoading () {
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
// 关闭loading事件
function endLoading () {
    loading.close()
}

// 默认状态
let needLoadingRequestCount = 0

// 开启loading
export function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++
}
// 取消loading
export function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return
        needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}

2.然后在封装好的axios中引入该js文件

import { showFullScreenLoading , tryHideFullScreenLoading } from './loading'

3.每次请求接口调用该loading方法

// 请求拦截器
instance.interceptors.request.use(
    function (config) {
        // 执行loading
        showFullScreenLoading()
        console.log(config,'全局拦截')
        // 发送请求携带token
        // let token = store.state.token
        // config.headers.token = token
        return config
    },
    function (error) {
        return Promise.reject(error);
    } 
)


// 响应拦截器
instance.interceptors.response.use(
    function (response) {
        // 关闭loading
        tryHideFullScreenLoading()
        console.log(response,'全局响应')
        return response
    },
    function (error) {.....}
 )
 

结束语

如果你觉得该文章不错，不妨点赞，让更多的人也能看到这篇内容

若哪里有问题还望各位大佬指出！