element-ui 实现全局loding动画加载

定义全局加载动画拦截器

使用element-ui Loading 组件实现动画
1.实例化loading对象

import { Message, Loading } from 'element-ui'
let loadingInstance = null
function startLoading () {loadingInstance = Loading.service({fullscreen: true,text: '加载中...',background: 'rgba(0, 0, 0, 0.6)'})
}
function closeLoading () {loadingInstance.close()
}
let needLoadingRequestCount = 0
function showLOding () {if (needLoadingRequestCount === 0) {startLoading()}needLoadingRequestCount++
}
function hideLoding () {if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {closeLoading()}
}
export default {showLOding,hideLoding
}

+axios中使用

import axios from 'axios'
import { MessageBox, Message,Loading  } from 'element-ui'
import qs from 'qs'
import {getToken,allInfo} from "@/utils/myauths";
import loading from "@/api/loading";
import router from "@/router";
// create an axios instanceconst service = axios.create({baseURL: 'http://www.bufantec.com', // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout
})
// 打开loding状态// request interceptor  拦截器
service.interceptors.request.use(config => {// do something before request is sentvar token = getToken();if (token){config.headers['bufan-token'] = token}// let each request carry token// ['X-Token'] is a custom headers key// please modify it according to the actual situationloading.showLOding()return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {loading.hideLoding()const res = response.dataif (res.tokenCode == 5000 || res.tokenCode == 5001 ){Message({message:'token失效,请重新登录!',type:'error',duration: 5 * 1000})//清除所有的信息allInfo()router.push('/login')return Promise.reject(new Error(res.message || 'Error'))}else {return res}// if the custom code is not 20000, it is judged as an error.// if (res.code !== 20000) {//   Message({//     message: res.message || 'Error',//     type: 'error',//     duration: 5 * 1000//   })//   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;//   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {//     // to re-login//     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {//       confirmButtonText: 'Re-Login',//       cancelButtonText: 'Cancel',//       type: 'warning'//     }).then(() => {//       store.dispatch('user/resetToken').then(() => {//         location.reload()//       })//     })//   }//   return Promise.reject(new Error(res.message || 'Error'))// } else {//   return res// }},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)
// {//   url: '/admin/xy/student/list',
//   method: 'GET',
//   kv
// }
// 把service 进一步加工
function http(config) {// config就是api传递的参数if (config.method.toLowerCase() === 'get') {// get类型 参数放哪?config.params = config.kv} else if (config.method.toLowerCase() === 'post') {// 设置数据默认提交格式 config 是从接口传递进来的参数默认没有headers 所以操作headers报错console.log('config', config)config.headers = {}config.headers['Content-Type'] = 'application/x-www-form-urlencoded'// 数据转换等需求...// 对象的序列化// https://www.npmjs.com/package/qs// 复杂对象: qs.stringify({ a: { b: { c: 'd', e: 'f' } } }, { allowDots: true }); 'a.b.c=d&a.b.e=f'// 数组: qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })  'a=b&a=c'config.data = qs.stringify(config.kv, { allowDots: true, arrayFormat: 'repeat' })}// 重新进行回调的方式来进行操作return service(config)
}export default http

element-ui 实现全局loding动画加载相关推荐

element UI Cascader 级联选择器动态加载次级选项
项目中有这样一个需求,省市区的选择,想到用到el-Cascader组件,动态加载次级选项. 现象首先应获取所有的省,然后用户选择某个省,动态加载该省下所有的市.这个过程中数组某项被修改,视图未更新 ...
Element ui 中 el-cascader 级联动态加载数据方法
话不多说,上代码 html部分: <el-cascader :props="treeOption" @change="onChange" style=&q ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
前端加载动画/加载等待动画
在加载前端的数据的时候,很多时候不能用进度条来衡量不定数据量.此时加载动画就有用武之地了.可以在数据请求时显示加载动画,等动画加载完成再隐藏加载动画,让前端更具交互友好性. 网上百度了很多关于这方面的 ...
微信小程序--请求接口时：添加全局的正在加载中图标效果
注: 如果没有封装request.js接口函数请看:https://mp.csdn.net/console/editor/html/106737440 1. 首先在封装的 request.js 文件中 ...
环形动画加载视图AnimatedCircleLoadingView
2019独角兽企业重金招聘Python工程师标准>>> 环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于A ...
环形动画加载视图AnimatedCircleLoadingView
环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于Android手表动画android-watch-loading-anima ...
android 动画间隔时间,Android使用View Animation实现动画加载界面
之前分别介绍了View Animation和Drawable Animation,学了就要用啊,今天给大家一个使用View Animation实现动画加载界面的实现. 首先先看一下实现效果. 下面是实 ...

element-ui 实现全局loding动画加载

定义全局加载动画拦截器

element-ui 实现全局loding动画加载相关推荐

最新文章

热门文章