vue+axios+element ui 实现全局loading加载示例

前端之家收集整理的这篇文章主要介绍了vue+axios+element ui 实现全局loading加载示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现全局loading加载

分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对?

import { Message,Loading } from 'element-ui';

import Cookies from 'js-cookie';

import router from '@/router/index'

let loading //定义loading变量

function startLoading() { //使用Element loading-start 方法
loading = Loading.service({
lock: true,text: '加载中……',background: 'rgba(0,0.7)'
})
}
function endLoading() { //使用Element loading-close 方法
loading.close()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}

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

//http request 拦截器
axios.interceptors.request.use(
config => {
var token = ''
if(typeof Cookies.get('user') === 'undefined'){
//此时为空
}else {
token = JSON.parse(Cookies.get('user')).token
}//注意使用的时候需要引入cookie方法,推荐js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
if(token != ''){
config.headers.token = token;
}
showFullScreenLoading()
return config;
},error => {
return Promise.reject(err);
}
);

//http response 拦截
axios.interceptors.response.use(
response => {
//当返回信息为未登录或者登录失效的时候重定向登录页面
if(response.data.code == 'W_100004' || response.data.message == '用户登录登录超时,请登录!'){
router.push({
path:"/",querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
tryHideFullScreenLoading()
return response;
},error => {
return Promise.reject(error)
}
)

以上这篇vue+axios+element ui 实现全局loading加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/30301.html

猜你在找的Vue相关文章