介绍 import axios 得到& # 39;axios& # 39;;
import {消息的不同之处是,Loading },得到& # 39;element-ui& # 39;;
import Cookies 得到& # 39;js-cookie& # 39;;
import router 得到& # 39;@/路由器/指数# 39;
let loading ,//定义变加载量
function startload(),{,//使用Element loading-start 方法=,,loading Loading.service ({
锁:才能,真的,
,,文字:& # 39;加载中……& # 39;,
,,背景:& # 39;rgba (0, 0, 0, 0.7) & # 39;
,})
}
function endLoading(),{,//使用Element loading-close 方法
,loading.close ()
}//那么,showFullScreenLoading (), tryHideFullScreenLoading(),要干的事儿就是将同一时刻的请求合并。//声明一个变量,needLoadingRequestCount,每次调用showFullScreenLoading方法,needLoadingRequestCount + 1。//调用tryHideFullScreenLoading()方法,needLoadingRequestCount 作用;1. needloadingrequestcount为,0,时,结束,装载。
let needLoadingRequestCount =0
export function showFullScreenLoading (), {
,if (needLoadingRequestCount ===, 0), {
startload才能()
,}
needLoadingRequestCount + +
}
export function tryHideFullScreenLoading (), {
,if (needLoadingRequestCount & lt;=, 0),返回
,needLoadingRequestCount——
,if (needLoadingRequestCount ===, 0), {
endLoading才能()
,}
}//http request 拦截器
axios.interceptors.request.use (=,config 祝辞,{
var 才能;token =, & # 39; & # 39;
如果才能(typeof Cookies.get(& # 39;用户# 39;),===,& # 39;未定义# 39;){
,,//此时为空
}else {才能
,,token =, JSON.parse (Cookies.get(& # 39;用户# 39;)).token
}//才能注意使用的时候需要引入饼干方法,推荐js-cookie
时间=config.data 才能;JSON.stringify (config.data);
config.headers 才能=,{
,,& # 39;内容类型# 39;:& # 39;application/json # 39;
,,}
如果才能(token !=, & # 39; & # 39;) {
,,config.headers.token =,令牌;
,,}
showFullScreenLoading才能()
return 才能;配置;
},=,error 祝辞,{
return 才能Promise.reject(错);
,}
);//http response 拦截器
axios.interceptors.response.use (=,response 祝辞,{//当才能返回信息为未登录或者登录失效的时候重定向为登录页面
如果才能(response.data.code ==, & # 39; W_100004& # 39;, | |, response.data.message ==, & # 39;用户未登录或登录超时,请登录! & # 39;){
,,router.push ({
,,,路径:“/?
,,,querry:{重定向:router.currentRoute.fullPath}//从哪个页面跳转
,,})
,,}
tryHideFullScreenLoading才能()
return 才能;响应;
},=,error 祝辞,{
return 才能;Promise.reject(错误)
,}
) 为什么要使用Vue
这篇文章将为大家详细讲解有关vue + axios + ui元素如何实现全局加载加载示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>实现全局加载加载
分析需求,我们只需要在请求发起的时候开始加载、响应结束的时候关闭加载,就这么简单对不对吗?
Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
关于“Vue + axios + ui元素如何实现全局加载加载示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
