vue3中的错误处理方案
概述
在设计一个框架时,如何处理错误是必不可少的环节。错误在程序开发中避无可避,那么出现错误时,至少要保证程序不会崩溃。合理的错误处理方案会大大增强框架的健壮性,覆盖异常场景,提高系统的可用性。
本文将探讨vue3
中的错误处理设计。
错误处理设计
vue3
中的错误处理逻辑集中在程序运行时,源码部分位于runtime-core\src\errorHandling.ts
。其内部封装了两个工具函数:callWithErrorHandling
和callWithAsyncErrorHandling
,用于处理函数调用中的错误,它们在vue3
的响应式系统和组件生命周期中扮演着重要角色,通常情况下只是vue3
内部调用。
ErrorCodes
和ErrorTypeStrings
类型
vue3
的错误处理定义了错误码和错误类型,用来标识错误,方便排查问题。
callWithErrorHandling
方法
callWithErrorHandling
函数用于同步函数调用时捕获错误,会在函数执行期间捕获并处理可能出现的异常情况或同步错误
其实现如下:
function callWithErrorHandling(fn, instance, type, args) {
try {
return args ? fn(...args) : fn();
} catch (err) {
handleError(err, instance, type);
}
}
上述示例很好理解,就是用到try
、catch
取执行fn
函数,并返回fn
函数执行的结果;在catch
中捕获错误,调用handleError
函数
callWithAsyncErrorHandling
方法
callWithAsyncErrorHandling
函数用于处理异步函数调用中的错误,它能够捕捉和处理Promise
的reject
错误。
其实现如下
function callWithAsyncErrorHandling(fn, instance, type, args) {
//fn:函数 instance:vue实例 type:类型 args:传递给fn的参数,下同