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 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
使用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
Protoss建筑一览
2020/03/14 星际争霸
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python多进程间通信代码实例
2019/09/30 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
《四季》教学反思
2014/04/08 职场文书
项目负责人任命书
2014/06/04 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
百家讲坛观后感
2015/06/12 职场文书
python获取字符串中的email
2022/03/31 Python
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL