Javascript try catch的使用

說到 try...catch 都覺得非常熟悉了，不就是用來捕捉代碼塊中的錯(cuò)誤嘛，平時(shí)也用得比較多的。然而因?yàn)榱私獠粔蚨啵业拿嬖噮s栽在了一個(gè)簡(jiǎn)單的知識(shí)點(diǎn)上：try...catch 只能捕捉到同步執(zhí)行代碼塊中的錯(cuò)誤。 題目是：以下代碼有錯(cuò)嗎？如果有錯(cuò)，應(yīng)該如何改正？

try {
  setTimeout(() => {
    throw new Error('err')
  }, 200);
} catch (err) {
  console.log(err);
}
 
try {
  Promise.resolve().then(() => {
    throw new Error('err')
  })
} catch (err) {
  console.log(err);
}

反正就是不知道咋回事，我之前的知識(shí)儲(chǔ)備中就是沒有這個(gè)知識(shí)點(diǎn)：try...catch不能異步捕獲代碼錯(cuò)誤，因?yàn)樗旧砭褪且粋€(gè)同步代碼塊。所以看到這道題我就懵了，平時(shí)代碼不就是這樣寫的嗎，用try...catch來捕獲錯(cuò)誤，所以當(dāng)時(shí)就直接回了我不知道，感覺沒有啥錯(cuò)誤。。。，面試官無奈的看了我一眼，下來可以了解一下，然后就沒有然后了。

下來我就趕緊查了資料，才知道try...catch不能異步捕獲代碼錯(cuò)誤。在 JavaScript 中，setTimeout 是一個(gè)異步函數(shù)，它的回調(diào)函數(shù)會(huì)在指定的延時(shí)后被放入事件隊(duì)列，等待當(dāng)前執(zhí)行棧清空后才執(zhí)行。因此，當(dāng)setTimeout的回調(diào)函數(shù)執(zhí)行并拋出錯(cuò)誤時(shí)，try...catch已經(jīng)執(zhí)行完畢，無法捕捉到異步回調(diào)中的錯(cuò)誤。

正確的做法是在異步操作中直接處理錯(cuò)誤，例如使用回調(diào)函數(shù)、Promises 或者 async/await 結(jié)合 try...catch

new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      throw new Error('err');
    } catch (err) {
      reject(err);
    }
  }, 200);
})
  .then(() => {
    // 正常執(zhí)行時(shí)的處理邏輯
  })
  .catch((err) => {
    console.log(err); // 這里會(huì)捕捉到錯(cuò)誤
  });

至于第二個(gè)例子，嘗試使用try...catch來捕捉一個(gè)在Promise鏈中拋出的錯(cuò)誤。這種方式同樣是無效的，因?yàn)閠ry...catch不能捕捉到在Promise鏈中的異步錯(cuò)誤。

Promise 對(duì)象用于表示一個(gè)異步操作的最終完成（或失敗），及其結(jié)果值。一個(gè)Promise的狀態(tài)可能是以下幾種：

Pending（等待態(tài)） ：初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。

Fulfilled（成功態(tài)） ：意味著操作成功完成。

Rejected（失敗態(tài)） ：意味著操作失敗。

在Promise中拋出一個(gè)錯(cuò)誤（例如通過throw語句）會(huì)導(dǎo)致Promise被拒絕（或失敗）。要正確處理這個(gè)錯(cuò)誤，需要在Promise鏈中使用.catch方法或者在一個(gè)async函數(shù)中使用try...catch。

// 方法一
Promise.resolve()
  .then(() => {
    throw new Error('err');
  })
  .catch((err) => {
    console.log(err); // 這里會(huì)捕捉到錯(cuò)誤
  });

// 方法二
async function handleError() {
  try {
    await Promise.resolve().then(() => {
      throw new Error('err');
    });
  } catch (err) {
    console.log(err); // 這里會(huì)捕捉到錯(cuò)誤
  }
}
 
handleError();