一个空间放两个php网站,网站模板 素材,lamp网站开发经验,源码分享网实现全局loading加载分析需求#xff0c;我们只需要在请求发起的时候开始loading#xff0c;响应结束的时候关闭loading#xff0c;就这么简单 对不对#xff1f;import axios from axios;import { Message, Loading } from element-ui;import Cookies from js-cookie;impo…实现全局loading加载分析需求我们只需要在请求发起的时候开始loading响应结束的时候关闭loading就这么简单 对不对import axios from axios;import { Message, Loading } from element-ui;import Cookies from js-cookie;import router from /router/indexlet loading //定义loading变量function startLoading() { //使用Element loading-start 方法loading Loading.service({lock: true,text: 加载中……,background: rgba(0, 0, 0, 0.7)})}function endLoading() { //使用Element loading-close 方法loading.close()}//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。//声明一个变量 needLoadingRequestCount每次调用showFullScreenLoading方法 needLoadingRequestCount 1。//调用tryHideFullScreenLoading()方法needLoadingRequestCount - 1。needLoadingRequestCount为 0 时结束 loading。let needLoadingRequestCount 0export function showFullScreenLoading() {if (needLoadingRequestCount 0) {startLoading()}needLoadingRequestCount}export function tryHideFullScreenLoading() {if (needLoadingRequestCount 0) returnneedLoadingRequestCount--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-cookieconfig.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)})以上这篇vueaxioselement ui 实现全局loading加载示例就是小编分享给大家的全部内容了希望能给大家一个参考也希望大家多多支持脚本之家。
