異常捕獲

boredream 發(fā)布于2019-08-21 16:40 / 382人閱讀

摘要：中的傳統(tǒng)做法假設(shè)代碼塊執(zhí)行拋出錯(cuò)誤，那么捕獲該錯(cuò)誤的寫法為代碼塊執(zhí)行，并拋出錯(cuò)誤定時(shí)器我們先來(lái)針對(duì)上面的代碼改寫一下，加入一個(gè)定時(shí)器。像這樣，將扔在定時(shí)器的外面，是無(wú)法捕獲到內(nèi)部的錯(cuò)誤的。

ES5 中的傳統(tǒng)做法

假設(shè)代碼塊執(zhí)行拋出錯(cuò)誤 fail，那么捕獲該錯(cuò)誤的寫法為：

try {
  // 代碼塊執(zhí)行，并拋出 fail 錯(cuò)誤
  throw new Error("fail");
} catch (e) {
  console.log(e);
}

定時(shí)器

我們先來(lái)針對(duì)上面的代碼改寫一下，加入一個(gè)定時(shí)器。

try {
  setTimeout(()=>{
    throw new Error("fail");
    // Uncaught Error: fail
     }, 1000);
} catch (e) {
  console.log(e);
}

像這樣，將 try/catch 扔在定時(shí)器的外面，是無(wú)法捕獲到內(nèi)部的錯(cuò)誤的。

正確的做法應(yīng)該是：

 setTimeout(()=>{
  try{
    throw new Error("fail");
  } catch (e) {
    console.log(e);
  }
},1000);

Promise

function doSomething() {
  return new Promise((resolve, reject) => {
    // 同步代碼中的 throw 可以被捕捉到
    throw new Error("fail");
  });
}

doSomething()
  .then((x) => {
    console.log("success:", x);
  })
  .catch((err) => {
    console.log("fail:", err);
  });

這樣寫是沒(méi)有問(wèn)題的，錯(cuò)誤能夠被捕獲到。但只要稍微修改一下，可能就出現(xiàn)問(wèn)題了。比如：

function doSomething() {
  return new Promise((resolve, reject) => {
    // 異步代碼中的 throw 不能被 Promise 的 catch 捕捉到
    setTimeout(() => {
      throw new Error("fail");
    }, 1000);
  });
}

doSomething()
  .then((x) => {
    console.log("success:", x);
  })
  .catch((err) => {
    console.log("fail:", err);
  });

這里拋出但錯(cuò)誤將不能被捕獲。所以，在 Promise 中，我們一般通過(guò) reject 來(lái)拋出錯(cuò)誤。

function doSomething(x) {
  return new Promise((resolve, reject) => reject(x));
}

doSomething("fail").then((x) => {
  console.log("success:", x);
}).catch((err) => {
  console.log("fail:", err);
});
// fail: fail

另外，還有一個(gè)比較有意思的細(xì)節(jié)，在 catch 之后繼續(xù)添加 .then 會(huì)被繼續(xù)執(zhí)行。

function doSomething(x) {
  return new Promise((resolve, reject) => reject(x));
}

doSomething("fail").then((x) => {
  console.log("success:", x);
}).catch((err) => {
  console.log("fail:", err);
  // 這里可以寫 return 給下面的方法繼續(xù)執(zhí)行
}).then((x) => {
  console.log("continue:", x);
});
// fail: fail
// continue: undefined

Async/Await

本質(zhì)上來(lái)講， Async/Await 是通過(guò) Promise 實(shí)現(xiàn)，所以基本跟上面 Promise 所講的差不多。

可以在 await 方法外嵌套 try/catch，類似這樣：

function doSomething(x) {
  return new Promise((resolve, reject) => reject(x));
}

(async () => {
  try {
    const result = await doSomething("fail");
    console.log("success:", result);
    // return 返回
  } catch (err) {
    console.log("fail:", err);
    // return 返回
  }
})();
// fail: fail

但這里就有一個(gè)問(wèn)題，比如函數(shù)需要有返回，那么返回的語(yǔ)句就需要寫兩次，正常但時(shí)候返回結(jié)果，錯(cuò)誤的時(shí)候，返回一個(gè) throw new Error() 或者其他的。有一個(gè)小的竅門，可以這樣寫：

function doSomething(x) {
  return new Promise((resolve, reject) => reject(x));
}

(async () => {
  const result = await doSomething("fail").catch((err) => {
    console.log("fail:", err);
    return 0; // 默認(rèn)值
  });
  console.log("success:", result);
})();
// fail: fail
// success: 0

在錯(cuò)誤捕獲到之后，重新分配一個(gè)默認(rèn)值，讓代碼繼續(xù)運(yùn)行。