发布于 2023-06-16

消除 Vue 中 Unhandled error during execution of xxx 的警告

以 Vue3 为例，通常我们会在 onMounted 钩子中处理异步请求

onMounted(() => {
  await request()
  fn() // fn 只在 request 请求成功后被调用
})

如果 request 请求出错而未处理，Vue 会抛出警告

虽然影响并不大，可警告看着还是不太舒服，索性还是想办法解决下

可通过下面几种方式消除警告

try…catch

缺点：太丑了

onMounted(() => {
  try {
    await request()
  } catch(error) {
    return
  }
  fn() // fn 只在 request 请求成功后被调用
})

await…catch

缺点：需要额外对错误类型进行判断

onMounted(() => {
  const result = await request()!.catch(error => new Error())
  if(result instanceof Error) return
  fn()
})

.then

推荐使用，这时候 then 比 await 好用

1
2
3

onMounted(() => {
  request()?.then(fn, () => undefined)
})

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。