關於 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（正常打印出錯誤實例，未報錯）和 Uncaught Error: 5（一個未捕獲錯誤）。

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

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

調用 nextTick() 方法後，callback 被存放起來， 直到下一個事件循環(Tick)纔會取出來執行。嘗試對異步方法進行 try/catch 操 作只能捕獲當次事件循環內的異常，對 callback 執行時拋出的異常將無能爲力。

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

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

在報錯的時候，線程執行已經進入 try/catch 代碼塊，並且處在 try/catch 裏，才能被捕捉到。

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

報錯的時機，是代碼執行進入了 try/catch ，執行 f1 方法的時候，線程執行處在 try 裏面，所以能捕捉到。

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

方法定義在 try/catch 代碼塊裏，但是執行方法在 try/catch 外，執行 f1 方法的時候報錯，此時 try/catch 之前已經執行完成了，所以無法捕捉異常。