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

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（正常打印出錯誤實(shí)例，未報(bào)錯）和 Uncaught Error: 5（一個未捕獲錯誤）。

image

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

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

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

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

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

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

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

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