vue + axios + element-ui 实现全局Loading(部门接口不要loading，多个请求合并一个loading)
- import { Loading } from 'element-ui'let needLoadingRequestCount = 0let loadingconst startLoading = () => { loading = Loading.service({ lock: true, text: '冒死加载中...', //可以自界说文字 spinner: 'el-icon-loading', //自界说加载图标类名 background: 'rgba(0, 0, 0, .3)' //遮罩层背景色 })}function endLoading() { Vue.nextTick(function() { // DOM 更新了 loading.close() })}export const showLoading = () => { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++}export const hideLoading = () => { setTimeout(tryCloseLoading, 300)}function tryCloseLoading() { if (needLoadingRequestCount { // 这里是加loading的地方 if (config.config.showLoading === true) { showLoading() } //..... 其他代码 }, error => { hideLoading() return Promise.reject(error) } ) // 响应拦截axios.interceptors.response.use( res => { hideLoading() //..... 其他代码 }, error => { hideLoading() //..... 其他代码 })//* 封装post请求 （默认都加上loading）export function post(url, data = {}, config = { showLoading: true }) { return new Promise((resolve, reject) => { axios({ url, method: 'post', data, config }).then( response => { resolve(response.data) }, err => { reject(err) } ) })}
来源：https://blog.csdn.net/qq_41287158/article/details/111872557
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
