關(guān)于 try catch 捕捉不到異常

先看下面的代碼，思考一下輸出：

try {  throw new Error(3);} catch (e) {  console.log(e);}
try {  // 捕捉不到異常  setTimeout(function () {    throw new Error(5);  }, 100);} catch (e) {  console.log(e);}

在瀏覽器是分別輸出Error: 3（正常打印出錯(cuò)誤實(shí)例，未報(bào)錯(cuò)）和 Uncaught Error: 5（一個(gè)未捕獲錯(cuò)誤）。

再或者你在 vue 中寫了一段這樣的代碼，也是捕捉不到異常。

try {  // 捕捉不到異常  this.$nextTick(function () {    throw new Error(5);  }, 100);} catch (e) {  console.log(e);}

調(diào)用 nextTick() 方法后，callback 被存放起來， 直到下一個(gè)事件循環(huán)(Tick)才會取出來執(zhí)行。嘗試對異步方法進(jìn)行 try/catch 操作只能捕獲當(dāng)次事件循環(huán)內(nèi)的異常，對 callback 執(zhí)行時(shí)拋出的異常將無能為力。

在編寫異步方法時(shí)，只要將 try/catch 正確地書寫在回調(diào)方法中即可，無須過多處理。

this.$nextTick(function () {  try {    throw new Error(5);  } catch (e) {    console.log(e);  }}, 100);

在報(bào)錯(cuò)的時(shí)候，線程執(zhí)行已經(jīng)進(jìn)入 try/catch 代碼塊，并且處在 try/catch 里，才能被捕捉到。

function f1 () {  throw new Error(5);}try {  f1()} catch (e) {   console.log('error', e)}

報(bào)錯(cuò)的時(shí)機(jī)，是代碼執(zhí)行進(jìn)入了 try/catch ，執(zhí)行 f1 方法的時(shí)候，線程執(zhí)行處在 try 里面，所以能捕捉到。

try {  // 捕捉不到異常  function f1 () {    throw new Error(5);  }} catch (e) {   console.log('error', e)}f1()

方法定義在 try/catch 代碼塊里，但是執(zhí)行方法在 try/catch 外，執(zhí)行 f1 方法的時(shí)候報(bào)錯(cuò)，此時(shí) try/catch 之前已經(jīng)執(zhí)行完成了，所以無法捕捉異常。