vue教程

  • 后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javam...
  • vue初学者入门教程 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/hello-vu...
  • vue入门教程之基础语法 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-if...
  • vue入门教程之-属性、事件和双向绑定 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue...
  • vue入门教程之-组件 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-com...
  • vue-cli3(cli3 文件中没有vue.config.js ,进行额外的配置) 本地项目调后台接口,会跨域,为了解决这个问题 进行代理配置 需要新建vue.config.js vue.config.js 中 const { defineCo...
  • vue-router 基本使用   路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about...
  • axios拦截器处理请求响应 import Vue from 'vue' import router from '../router' import axios from 'axios' import {Message} from 'elemen...
  • vue中$refs的用法 一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值。 但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在...
  • 1.浅拷贝 1.直接赋值 let obj1 = { name: 'yrg', age: 22, hobby: ['basketball','game'] } let obj2 = obj1 obj1.name = 'xx' console.lo...
vue elementUI axios实现的全局loading加载动画 - idea激活- IntelliJ IDEA 2021.1激活码破解教程(亲测激活至 2099 年,长期更新)- 爪哇男教程  

在请求较多的应用中,loading是必不可少的,否则人们不是认为程序卡了就是认为设备卡了

普通的项目中,每次请求基本都要手动写一下loading的出现和消失,且不说有些麻烦,而且在ajax异步的情况下,如果做不好loading同步,经常会出现loading不出现的情况,而且不同浏览器兼容性较差。

一.概念

在vue项目中,有了统一配置机制,可以实现对loading的配置使每次请求前自动出现loading,请求后loading消失

顺带一提,本来ajax调为同步模式挺好用的,但axios没有同步功能

  • 第一种方法是在需要出现loading的地方加着v-loading 指令,此方法在小应用中可以用,在大型应用中显得过于繁琐
  • 第二种是服务方式:
Loading 还可以以服务的方式调用。引入 Loading 服务:

import { Loading } from 'element-ui';
在需要调用时:

Loading.service(options);
其中 options 参数为 Loading 的配置项,具体见下表。LoadingService 会返回一个 Loading 实例,可通过调用该实例的 close 方法来关闭它:

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
});
需要注意的是,以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的 Loading 实例,而是返回现有全屏 Loading 的实例:

let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true

``

最后一句话是重点,也就是说如果页面有多个请求一起请求,如果都使用一个服务loading,很可能会出现较快结束请求的那个直接把loading关了,而请求时间长的还没有结束请求。这点在下面设计的时候需要关注

二.实现

在main.js中,引入vue,axios,elementui

import Vue from 'vue'
import App from './App'
import router from './router'
 
import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
import axios from 'axios'
 
import {Loading} from 'element-ui'

//修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=axios
// 安装各类插件
Vue.use(elementui)
 
let loading;
//内存中正在请求的数量
let loadingNum=0;
function startLoading() {    
    if(loadingNum==0){
        loading = Loading.service({
          lock: true,
          text: '拼命加载中...',
          background:'rgba(255,255,255,0.5)',
        })
    }
    //请求数量加1
    loadingNum++;
}
function endLoading() {
    //请求数量减1
    loadingNum--
    if(loadingNum<=0){
        loading.close()
    }
}
 
//请求数据拦截器
axios.interceptors.request.use(request => {
  startLoading();
  return request
}, err => {
  return Promise.reject(err);
});
 
 
//接收响应拦截器
axios.interceptors.response.use(response => {
  endLoading();
  return response
}, err => {
  endLoading();
  if (err && err.response) {
    switch (err.response.status) {
      case 400: err.message = '请求错误(400)'; break;
      case 401: this.$router.push('/login'); break;
      case 403: err.message = '拒绝访问(403)'; break;
      case 404: err.message = '请求出错(404)'; break;
      case 408: err.message = '请求超时(408)'; break;
      case 500: err.message = '服务器错误(500)'; break;
      case 501: err.message = '服务未实现(501)'; break;
      case 502: err.message = '网络错误(502)'; break;
      case 503: err.message = '服务不可用(503)'; break;
      case 504: err.message = '网络超时(504)'; break;
      case 505: err.message = 'HTTP版本不受支持(505)'; break;
      default: err.message = `连接出错(${err.response.status})!`;
    }
  } else {
    err.message = '连接服务器失败!'
  }
  message.error(err.message);
  return Promise.reject(err);
});
 
   
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    eventHub: new Vue()
  } 
})

因为loading只是一个实例,所以需要加入了请求个数控制,每次请求开始加一个,请求结束减一个,当请求个数为0时才使loading消失。

这样配置后应用中其他组件每次调用axios请求都会自动出现消失loading。


全部评论: 0

    我有话说: