[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"content:\u002F2023\u002Fvue\u002Funhandled-error":3,"surround:\u002F2023\u002Fvue\u002Funhandled-error":126},{"id":4,"title":5,"body":6,"categories":101,"date":104,"description":105,"draft":106,"extension":107,"image":108,"meta":109,"navigation":111,"path":112,"permalink":108,"published":108,"readingTime":113,"recommend":108,"references":108,"seo":118,"sitemap":119,"stem":122,"tags":123,"type":124,"updated":108,"__hash__":125},"content\u002Fposts\u002F2023\u002Fvue\u002Funhandled-error.md","消除 Vue 中 Unhandled error during execution of xxx 的警告",{"type":7,"value":8,"toc":94},"minimark",[9,18,28,35,41,44,47,52,55,61,65,68,74,78,88],[10,11,12,13,17],"p",{},"以 Vue3 为例，通常我们会在 ",[14,15,16],"code",{"code":16},"onMounted"," 钩子中处理异步请求",[19,20,26],"pre",{"className":21,"code":23,"language":24,"meta":25},[22],"language-ts","onMounted(() => {\n  await request()\n  fn() \u002F\u002F fn 只在 request 请求成功后被调用\n})\n","ts","",[14,27,23],{"__ignoreMap":25},[10,29,30,31,34],{},"如果 ",[14,32,33],{"code":33},"request"," 请求出错而未处理，Vue 会抛出警告",[10,36,37],{},[38,39],"img",{"alt":25,"src":40},"\u002Fimages\u002Fvue\u002Funhandled-error\u002Ferror_01.png",[10,42,43],{},"虽然影响并不大，可警告看着还是不太舒服，索性还是想办法解决下",[10,45,46],{},"可通过下面几种方式消除警告",[48,49,51],"h2",{"id":50},"trycatch","try...catch",[10,53,54],{},"缺点：太丑了",[19,56,59],{"className":57,"code":58,"language":24,"meta":25},[22],"onMounted(() => {\n  try {\n    await request()\n  } catch(error) {\n    return\n  }\n  fn() \u002F\u002F fn 只在 request 请求成功后被调用\n})\n",[14,60,58],{"__ignoreMap":25},[48,62,64],{"id":63},"awaitcatch","await...catch",[10,66,67],{},"缺点：需要额外对错误类型进行判断",[19,69,72],{"className":70,"code":71,"language":24,"meta":25},[22],"onMounted(() => {\n  const result = await request()!.catch(error => new Error())\n  if(result instanceof Error) return\n  fn()\n})\n",[14,73,71],{"__ignoreMap":25},[48,75,77],{"id":76},"then",".then",[10,79,80,81,83,84,87],{},"推荐使用，这时候 ",[14,82,76],{"code":76}," 比 ",[14,85,86],{"code":86},"await"," 好用",[19,89,92],{"className":90,"code":91,"language":24,"meta":25},[22],"onMounted(() => {\n  request()?.then(fn, () => undefined)\n})\n",[14,93,91],{"__ignoreMap":25},{"title":25,"searchDepth":95,"depth":95,"links":96},4,[97,99,100],{"id":50,"depth":98,"text":51},2,{"id":63,"depth":98,"text":64},{"id":76,"depth":98,"text":77},[102,103],"学习笔记","Vue","2023-06-16","以 Vue3 为例，通常我们会在 onMounted 钩子中处理异步请求",false,"md",null,{"comments":106,"slots":110},{},true,"\u002F2023\u002Fvue\u002Funhandled-error",{"text":114,"minutes":115,"time":116,"words":117},"1 min read",0.89,53400,178,{"title":5,"description":105},{"loc":112,"images":120},[121],{"loc":40},"posts\u002F2023\u002Fvue\u002Funhandled-error",[103],"tech","fUCWOO33FXipMReJOEgLDCs-IGw9zam4jgz-4yRxJic",[127,132],{"title":128,"path":129,"stem":130,"date":131,"type":124,"children":-1},"script 标签的 defer 与 async 属性（转载）","\u002F2023\u002Fasync-and-defer","posts\u002F2023\u002Fasync-and-defer","2023-03-17",{"title":133,"path":134,"stem":135,"date":104,"type":124,"children":-1},"Vue 中的特殊变量 $event","\u002F2023\u002Fvue\u002Fvue3-event","posts\u002F2023\u002Fvue\u002Fvue3-event",1793699838036]