1.支持设置loading延时出现的时间,比如接口响应很快,就没必要显示loading了,否则loading闪一下就消失了很多余
2.支持设置loading是否出现,虽然loading是封装在axios拦截器里的,但是某些接口可能不需要有loading显示
3.以服务的方式调用,引入 element ui Loading 服务
基于nuxt $axios模块,代码如下:
import { Message, Loading } from "element-ui"
export default ({ $axios, store, app, redirect, route, req, res }) => {
let [loadingCount, currencyCode, currentLanguage, isRefreshing, token] = [
0,
"",
"",
true,
""
]
$axios.onRequest(config => {
// 如果请求头里设置了可显示loading,才调用showLoading
if (!config.headers.hideLoading) {
showLoading(config.headers.loadingTarget, config.headers.delayTime)
}
return config
})
$axios.onResponse(response => {
if (!response.config.headers.hideLoading) {
hideLoading()
}
return response
})
$axios.onError(error => {
hideLoading()
return Promise.reject(error)
})
let [loading, timer] = [null, null]
// 显示loading
function showLoading(target, delayTime) {
if (loadingCount === 0 && !loading) {
// loading 延迟显示的时间默认1s,可配置是否延迟显示
if (delayTime !== false) {
timer = setTimeout(() => {
loading = Loading.service({
text: "Loading...",
background: "rgba(0, 0, 0, 0)",
target: target || "body"
})
}, 1000)
} else {
loading = Loading.service({
text: "Loading...",
background: "rgba(0, 0, 0, 0)",
target: target || "body"
})
}
}
loadingCount++
store.commit("setShowEmpty", false)
}
// 隐藏loading
function hideLoading() {
loadingCount--
loadingCount = Math.max(loadingCount, 0) // 做个保护
if (loadingCount === 0) {
if (timer) {
clearTimeout(timer)
timer = null
}
// 关闭loading
toHideLoading()
setTimeout(() => {
store.commit("setShowEmpty", true)
}, 500)
}
}
// 防抖:将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时, loading闪烁的问题。
const toHideLoading = _.debounce(() => {
if (loading) {
loading.close()
}
loading = null
}, 300)
}