Vue全局loading及错误提示的思路与实现


Posted in Javascript onAugust 09, 2019

前言

近期项目马上上线,前两天产品提个需求,加个全局loading,我这半路出家的vue选手,有点懵逼,这玩意还是第一次,但是作为一个初级的前端切图仔,这个东西是必须会的,花了五分钟思考了一下,然后动键盘码出来 ,今天总结一下,与各位分享交流,有错误还请各位指出。

思路

我们项目请求使用的是axios,那么我们就在请求前后进行拦截,添加我们需要的东西,然后通信控制loading,通信方式我就不写了,有个老哥写的不错,可以去看看传送门

代码实现

首先对axios进行封装 如果你想进行全局错误提醒 也可以在拦截的代码进行操作 具体代码看下面

/**
 * axios 配置模块
 * @module config
 * @see utils/request
*/

/**
 * axios具体配置对象
 * @description 包含了基础路径/请求前后对数据对处理,自定义请求头的设置等
 */
const axiosConfig = {
 baseURL: process.env.RESTAPI_PREFIX,
 // 请求前的数据处理
 // transformRequest: [function (data) {
 // return data
 // }],
 // 请求后的数据处理
 // transformResponse: [function (data) {
 // return data
 // }],
 // 自定义的请求头
 // headers: {
 // 'Content-Type': 'application/json'
 // },
 // 查询对象序列化函数
 // paramsSerializer: function (params) {
 // return qs.stringify(params)
 // },
 // 超时设置s
 timeout: 10000,
 // 跨域是否带Token 项目中加上会出错
 // withCredentials: true,
 // 自定义请求处理
 // adapter: function(resolve, reject, config) {},
 // 响应的数据格式 json / blob /document /arraybuffer / text / stream
 responseType: 'json',
 // xsrf 设置
 xsrfCookieName: 'XSRF-TOKEN',
 xsrfHeaderName: 'X-XSRF-TOKEN',
 // 下传和下载进度回调
 onUploadProgress: function (progressEvent) {
 Math.round(progressEvent.loaded * 100 / progressEvent.total)
 },
 onDownloadProgress: function (progressEvent) {
 Math.round(progressEvent.loaded * 100 / progressEvent.total)
 },
 // 最多转发数,用于node.js
 maxRedirects: 5,
 // 最大响应数据大小
 maxContentLength: 2000,
 // 自定义错误状态码范围
 validateStatus: function (status) {
 return status >= 200 && status < 300
 }
 // 用于node.js
 // httpAgent: new http.Agent({ keepAlive: true }),
 // httpsAgent: new https.Agent({ keepAlive: true })
}
/** 导出配置模块 */
export default axiosConfig

开始构建请求对象

const request = axios.create(config)

请求之前拦截

// 请求拦截器
request.interceptors.request.use(
 config => {
 // 触发loading效果
 store.dispatch('SetLoding', true)
 return config
 },
 error => {
 return Promise.reject(error)
 }
)

请求后拦截

// 返回状态判断(添加响应拦截器)
request.interceptors.response.use(

 (res) => {
 // 加载loading
 store.dispatch('SetLoding', false)
 // 如果数据请求失败
 let message = ''
 let prefix = res.config.method !== 'get' ? '操作失败:' : '请求失败:'
 switch (code) {
  case 400: message = prefix + '请求参数缺失'; break
  case 401: message = prefix + '认证未通过'; break
  case 404: message = prefix + '此数据不存在'; break
  case 406: message = prefix + '条件不满足'; break
  default: message = prefix + '服务器出错了'; break
 }
 let error = new Error(message)

 if (tip) {
  errorTip(vueInstance, error, message)
 }
 let result = { ...res.data, error: error }
 return result
 },
 (error, a, b) => {
 store.dispatch('SetLoding', false)
 process.env.NODE_ENV !== 'production' && console.log(error)
 return { data: null, code: 500, error: error }
 }
)

通信

我这边通信用的是Vuex,其他方式类似

state: {
 loading: 0
 },
 mutations: {
 SET_LOADING: (state, loading) => {
  loading ? ++state.loading : --state.loading
 },
 CLEAN_LOADING: (state) => {
  state.loading = 0
 }
 },
 actions: {
 SetLoding ({ commit }, boolean) {
  commit('SET_LOADING', boolean)
 },
 CLEANLOADING ({commit}) {
  commit('CLEAN_LOADING')
 }
 },
 getters: {
 loading (state) {
  return state.loading
 }
 }

state采用计数方式能够避免一个页面可能同时有多个ajax请求,导致loading闪现多次,这样就会在所有ajax都结束后才隐藏loading,不过有个很重要的地方需要注意,每一个路由跳转时无论ajax是否结束,都必须把state的值设置为0,具体下面的代码

router.beforeEach((to, from, next) => {
 store.dispatch('CLEANLOADING')
 next()
})

全局的loading我这边是加在home.vue里,由于我这个项目是后台管理,可以加在layout.vue,其实都差不多

<div class="request-loading" :class="{'request-loading-show':loading}">
 <div class="request-loading-main" ></div>
</div>
import { mapGetters } from 'vuex'
export default { 
 data () {
 
 }
 computed: {
 ...mapState(['loading]) 
 }
<scrirpt lang="scss" scoped>
//这个我就不写了 loading样式不同 我们代码也就不同
</script>

大致代码和思路就是这样 可能会有错误 还希望各位批评指正

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
JavaScript 继承详解(二)
Jul 13 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
laypage分页控件使用实例详解
May 19 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JS实现的自定义map方法示例
May 17 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 #Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 #Javascript
微信小程序如何连接Java后台
Aug 08 #Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 #Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 #Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 #Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
You might like
function.inc.php超越php
2006/12/09 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python书籍信息爬虫实例
2018/03/19 Python
python实现三维拟合的方法
2018/12/29 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
家长给孩子的评语
2014/01/30 职场文书
自动一体化专业求职信
2014/03/15 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
公司业务员管理制度
2015/08/05 职场文书
银行求职信怎么写
2019/06/20 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP