vue + axios + element-ui 实现全局Loading(部分接口不要loading,多个请求合并一个loading)
- loading.js
import { Loading } from 'element-ui'
let needLoadingRequestCount = 0
let loading
const startLoading = () => {
loading = Loading.service({
lock: true,
text: '拼命加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, .3)'
})
}
function endLoading() {
Vue.nextTick(function() {
loading.close()
})
}
export const showLoading = () => {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export const hideLoading = () => {
setTimeout(tryCloseLoading, 300)
}
function tryCloseLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
- 在 封装axios请求的地方引入loading.js
import { showLoading, hideLoading } from '@/util/loading'
axios.interceptors.request.use(
config => {
if (config.config.showLoading === true) {
showLoading()
}
},
error => {
hideLoading()
return Promise.reject(error)
}
)
axios.interceptors.response.use(
res => {
hideLoading()
},
error => {
hideLoading()
}
)
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)
}
)
})
}
- 当请求不想要带loading时: