[转] Vue中异步错误处理
一般在一个项目开始之前,我们一般会对现有的框架做一定功能上的丰富,比如对ajax请求功能的二次封装,封装的功能可能包含了:通用错误处理,请求过滤,响应过滤等等。如果我们封装的函数叫request,那么业务中触发一个ajax请求的流程大致如图:
通常,这样的流程处理能满足需求,然而,更多的情况,我们希望request的返回数据,经过request预处理后,首先交由业务代码这边自行判断是否合法,是否需要处理错误,如果不合法,且自己不打算处理错误,则再抛出错误,这样的话,就符合很多后端框架的流程了,业务层的错误,先自己catch,要么处理,要么往框架抛,框架统一处理,流程大致如图:
这样的话,所有的错误,业务层有了优先处理的权利,不需要自行处理的情况才交由框架做通用处理。
当然,在javascript中,异步错误的处理不能简简单单地通过window.onerror
可以搞定的,在vue下改造,具体的思路是将我们需要按新的流程处理的函数处理成async函数,这样,我们就能用promise的那套错误处理机制来处理了。
具体实现看代码:
//为了不影响vue自有的Vue.config.errorHandler正常工作
//我们再单独定义一个异步错误处理函数
Vue.config.asyncErrorHandler = err => {
console.log('catch async error:', err)
}
//然后是在vue实例创建之前,包裹所有method方法
//根据method执行后返回的是否是promise,来决定是否需要catch错误
Vue.mixin({
beforeCreate() {
const methods = this.$options.methods || {}
Object.keys(methods).forEach(key => {
let fn = methods[key]
this.$options.methods[key] = function(...args) {
let ret = fn.apply(this, args);
if (ret && typeof ret.catch === 'function') {
return ret.catch(Vue.config.asyncErrorHandler)
} else {
return ret
}
}
})
},
})
这样的话,我们在新建vue实例的时候,将我们需要按新流程处理错误的方法声明为async:
new Vue({
el: '#test',
methods: {
async fn() {
this.name = 'click'
await timeout() // <==== timeout中reject的错误会被捕获
},
async fn1() {
this.name = 'click1'
throw {msg:'async函数中同步抛错',status:1000} // <==== 同步抛错也会被捕获
},
test() {
// 原来的方式书写method,人为触发不捕获,
// 生命周期中调用被Vue.config.errorHandler捕获
throw {
msg: '非async方法还是按照原来的方式处理错误',
status: 3000
}
}
}
})
测试代码:https://jsfiddle.net/a408115319/od5fgL4v/28/
[转] Vue中异步错误处理的更多相关文章
- Vue中异步组件(结合webpack,转载)
转载,原文出处:https://www.jianshu.com/p/40a364b5e964 1.什么是异步组件? 异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲 ...
- vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
- vue中的错误日志
一.Error compiling template: Component template requires a root element, rather than just text. 这个错误意 ...
- vue中异步函数async和await的用法
整理的不错,收藏一下 http://blog.sina.com.cn/s/blog_13d06fc1f0102wzfr.html
- vue(6)—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
- c#的异步处理思路和vue前端中异步处理思路比较
前语:目前工作在做的项目是前端基于vue的组件式开发,通过api接口调用,后端数据逻辑是一个c#实现的WCF服务 1.总结自己在c# .NET 4.5后的新异步方式 async搭配await来实现 ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误
在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...
随机推荐
- LOJ#2668 书法家
题意:要在一张网格纸上画出NOI图形,使得所占格子的权值和最大. 解:暴力DP即可... 从左往右,每个字母都可以被划分成三块,且每块都可用上下两维来表示. 于是一块一块的DP.考虑如何O(1)转移. ...
- mac下安装android-sdk
安装sdk brew cask install android-sdk 配置Path环境 vim ~/.bash_profile 设置路径 #Setting PATH for android-sdk ...
- 【踩坑】利用fastjson反序列化需要默认构造函数
利用 fastjson等 反序列化时需要注意,他可能会用到 默认的构造函数,如果没有默认构造函数,某些场景下可能会出现 反序列化熟悉为空的情况,如下图所示:
- git合并常见冲突
如果一个文件在服务器上已经做了修改,然后在本地开发中又做了一些修改的时候,再发布这个文件时很容易造成代码冲突,错误如下, error: Your local changes to the follow ...
- 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例
#用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- js制作可拖拽可点击的悬浮球
兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...
- 深入理解Java设计模式之观察者模式
前言 观察者,即时observer,总结来说就是一个当一个被观察的对象的状态发生变化时,会通知相应的观察者对象. 观察者模式定义了四种角色:抽象主题.具体主题.抽象观察者.具体观察者 1.抽象主题 ...
- @JoinColumn解释
@JoinColumn与@Column标记一样,是用于注释表中的字段的.它的属性与@Column属性有很多相同之处,这里就不详细讲述.请读者参阅5.2.2小节中有关@Column属性的部分. l ...
- CentOS 7 yum 安装php5.6
注意--enablerepo=remi --enablerepo=remi-php56这两个参数,指定源的意思 配置yum源 追加CentOS 6.5的epel及remi源. # rpm -Uvh h ...