Promise 错误处理：两种有效的捕获方法

背景

作为一名低代码资深（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）