背景
作为一名低代码资深(CV)前端开发工程师小C,有一天竟然被客户投诉了
客户A:我写的javascript代码运行时为什么捕捉不到异常,是不是你们平台有故障
小C:建议您这边可以使用try...catch 进行捕捉
客户A:不行,我都试过了
小C: 可以麻烦您提供下代码截图吗
客户A:你看!
export function mounted() {
console.log('mounted')
const promiseFunc = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('promise异常'))
})
})
}
try {
promiseFunc()
} catch(e) {
console.log('业务报错', e)
}
}
小C: 您等等,我这边验证下(啥东东,万能try...catch竟然无法拦截promise异常).....
探索
经过小C的研究,终于找到了原因和解决方案。在实际写代码的时候我们不希望一些不重要的错误直接被抛出,影响主线程的正常运作,所以通常会使用try...catch...在部分逻辑中进行“内部消化”,但是关于错误捕获还是有些误区容易踩到
场景
常规错误捕获
常规的错误捕获指的是代码中不存在异步的行为,或者说异步已经被转成了同步了,此时就可以使用常规的方式进行捕获
function errorFunction(a,b) {
const c = a + b
throw new Error('error')
}
try {
errorFunction(1,2)
} catch (e) {
console.log(e)
}
// 'error'
Promise错误捕获
捕获Promise错误时有两种方法,由于是异步行为,直接对整体进行捕获其实是不可以的
下面示范一个不正确的例子
function promiseFunc() {
return new Promise((resovel, reject) => {
setTimeout(() => {
reject(new Error('ddddd'))
})
})
}
try {
promiseFunc()
} catch(e) {
console.log('e')
}
// ..
// Uncaught (in promise) dddd
所以围绕Promise的错误捕获需要针对其异步特性,这里就有两个思路,一个是使用原生的Promise链式操作即
promise.then().catch().finally()
另一个就是使用async/await关键字将异步函数转为同步执行
下面示范两个修改的方式
function promiseFunc() {
return new Promise((resovel, reject) => {
setTimeout(() => {
reject(new Error('ddddd'))
})
})
}
// 方法1 转为async/await 写法
async function main() {
try {
await promiseFunc()
} catch (e) {
console.log(e)
}
}
// 方法2 使用链式操作
promiseFunc().then(() => {})
.catch(e => {
console.log(e)
})
彩蛋
小C: 您请看,相关代码可以点击查看
客户:验证通过,牛逼了!
作者介绍:
道一云,成立于2004年,是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项,涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。
欢迎关注:
免费体验:道一云产品免费试用
公众号:道一云低代码(do1info)