摘要：我打算分成前端魔法堂異常不僅僅是和前端魔法堂調(diào)用棧，異常實(shí)例中的寶藏兩篇分別敘述內(nèi)置自定義異常類，捕獲運(yùn)行時(shí)異常語法異常網(wǎng)絡(luò)請(qǐng)求異常事件，什么是調(diào)用棧和如何獲取調(diào)用棧的相關(guān)信息。

?編程時(shí)我們往往拿到的是業(yè)務(wù)流程正確的業(yè)務(wù)說明文檔或規(guī)范，但實(shí)際開發(fā)中卻布滿荊棘和例外情況，而這些例外中包含業(yè)務(wù)用例的例外，也包含技術(shù)上的例外。對(duì)于業(yè)務(wù)用例的例外我們別無它法，必須要求實(shí)施人員與用戶共同提供合理的解決方案；而技術(shù)上的例外，則必須由我們碼農(nóng)們手刃之，而這也是我想記錄的內(nèi)容。
?我打算分成《前端魔法堂——異常不僅僅是try/catch》和《前端魔法堂——調(diào)用棧，異常實(shí)例中的寶藏》兩篇分別敘述內(nèi)置/自定義異常類，捕獲運(yùn)行時(shí)異常/語法異常/網(wǎng)絡(luò)請(qǐng)求異常/PromiseRejection事件，什么是調(diào)用棧和如何獲取調(diào)用棧的相關(guān)信息。
?是不是未出發(fā)就已經(jīng)很期待呢？好吧，大家捉緊扶手，老司機(jī)要開車了^_^

?本篇將敘述如下內(nèi)容：

異常還是錯(cuò)誤？它會(huì)如何影響我們的代碼？

內(nèi)置異常類型有哪些？

動(dòng)手寫自己的異常類型吧！

捕獲“同步代碼”中的"運(yùn)行時(shí)異常"，用try/catch就夠了。

"萬能"異常捕獲者window.onerror，真的萬能嗎？

Promise.reject也拋異常，怎么辦？

404等網(wǎng)絡(luò)請(qǐng)求異常真心要后之后覺嗎？

?在學(xué)習(xí)Java時(shí)我們會(huì)被告知異常(Exception)和錯(cuò)誤(Error)是不一樣的，異常是不會(huì)導(dǎo)致進(jìn)程終止從而可以被修復(fù)(try/catch)，但錯(cuò)誤將會(huì)導(dǎo)致進(jìn)程終止因此不能被修復(fù)。當(dāng)對(duì)于JavaScript而言，我們要面對(duì)的僅僅有異常（雖然異常類名為Error或含Error字樣），異常的出現(xiàn)不會(huì)導(dǎo)致JavaScript引擎崩潰，最多就是讓當(dāng)前執(zhí)行的任務(wù)終止而已。
?上面說到異常的出現(xiàn)最多就是讓當(dāng)前執(zhí)行的任務(wù)終止，到底是什么意思呢？這里就涉及到Event Loop的原理了，下面我嘗試用代碼大致說明吧。

?說到內(nèi)置異常類那么必先提到的就是Error這個(gè)祖先類型了，其他所有的內(nèi)置異常類和自定義類都必須繼承它。而它的標(biāo)準(zhǔn)屬性和方法就以下這寥寥幾個(gè)而已

@prop {String} name - 異常名稱
@prop {String} message - 供人類閱讀的異常信息
@prop {Function} constructor - 類型構(gòu)造器
@method toString():String - 輸出異常信息

?由于標(biāo)準(zhǔn)屬性實(shí)在太少，無法提供更有效的信息供開發(fā)者定位異常發(fā)生的位置和重現(xiàn)事故現(xiàn)場(chǎng)，因此各瀏覽器廠家均手多多的自己增加些屬性，然后逐漸成了事實(shí)標(biāo)準(zhǔn)。

@prop {String} fileName - 異常發(fā)生的腳本URI
@prop {number} lineNumber - 異常發(fā)生的行號(hào)
@prop {number} columnNumber - 異常發(fā)生的列號(hào)
@prop {String} stack - 異常發(fā)生時(shí)的調(diào)用棧信息，IE10及以上才支持
@method toSource():String - 異常發(fā)生的腳本內(nèi)容

另外巨硬還新增以下兩個(gè)屬性

@prop {String} description - 和message差不多
@prop {number} number - 異常類型的編號(hào)，巨硬為每個(gè)異常設(shè)置了一個(gè)唯一的編號(hào)

?那么現(xiàn)在我要實(shí)例化一個(gè)Error對(duì)象，只需調(diào)用Error()或new Error()即可；若想同時(shí)設(shè)置message，則改為Error("test")或new Error("test")。其實(shí)Error的構(gòu)造函數(shù)簽名是這樣的

@constructor
@param {String=} message - 設(shè)置message屬性
@param {String=} fileName - 設(shè)置fileName屬性
@param {number=} lineNumber - 設(shè)置lineNUmber屬性

現(xiàn)在我們看看具體有哪些內(nèi)置的異常類型吧！

EvalError，調(diào)用eval()時(shí)發(fā)生的異常，已被廢棄只用于向后兼容而已

InternalError，JavaScript引擎內(nèi)部異常，F(xiàn)ireFox獨(dú)門提供的！

RangeError，當(dāng)函數(shù)實(shí)參越界時(shí)發(fā)生，如Array，Number.toExponential,Number.toFixed和Number.toPrecision時(shí)入?yún)⒎欠〞r(shí)。

ReferenceError，當(dāng)引用未聲明的變量時(shí)發(fā)生

SyntaxError，解析時(shí)發(fā)生語法錯(cuò)誤

TypeError，當(dāng)值不是所期待的類型時(shí)，null.f()也報(bào)這個(gè)錯(cuò)

URIError，當(dāng)傳遞一個(gè)非法的URI給全局URI處理函數(shù)時(shí)發(fā)生，如decodeURIComponent("%")，即decodeURIComponent，decodeURI,encodeURIComponent，encodeURI

?關(guān)于在StackOverflow上早有人討論如何自定義異常類型了參考
于是我們順手拈來即可

function MyError(message, fileName, lineNumber){
  if (this instanceof MyError);else return new MyError(message, fileName, lineNumber)
  this.message = message || ""
  if (fileName){ this.fileName = fileName }
  if (lineNumber){ this.lineNumber = lineNumber }
}

var proto = MyError.prototype = Object.create(Error.prototype)
proto.name = "MyError"
proto.constructor = MyError

cljs實(shí)現(xiàn)如下

(defn ^export MyError [& args]
  (this-as this
    (if (instance? MyError this)
      (let [ps ["message" "fileName" "lineNumber"]
            idxs (-> (min (count args) (count ps)) range)]
        (reduce
          (fn [accu i]
            (aset accu (nth ps i) (nth args i))
            accu)
          this
          idxs))
      (apply new MyError args))))

(def proto
  (aset MyError "prototype" (.create js/Object (.-prototype Error))))
(aset proto "name" "MyError")
(aset proto "constructor" MyError)

?為了防止由于異常的出現(xiàn)，導(dǎo)致正常代碼被略過的風(fēng)險(xiǎn)，我們習(xí)慣采取try/catch來捕獲并處理異常。

try{
  throw Error("unexpected operation happen...")
}
catch (e){
  console.log(e.message)
}

cljs寫法

(try
  (throw (Error. "unexpected operation happen...")
  (catch e
         (println (.-message e)))))

?很多時(shí)我們會(huì)以為這樣書寫就萬事大吉了，但其實(shí)try/catch能且僅能捕獲“同步代碼”中的"運(yùn)行時(shí)異常"。
1."同步代碼"就是說無法獲取如setTimeout、Promise等異步代碼的異常，也就是說try/catch僅能捕獲當(dāng)前任務(wù)的異常，setTimeout等異步代碼是在下一個(gè)EventLoop中執(zhí)行。

// 真心捕獲不到啊親～！
try{
  setTimeout(function(){
    throw Error("unexpected operation happen...")
  }, 0)
} catch(e){
  console.log(e)
}

2."運(yùn)行時(shí)異常"是指非SyntaxError，也就是語法錯(cuò)誤是無法捕獲的，因?yàn)樵诮馕鯦avaScript源碼時(shí)就報(bào)錯(cuò)了，還怎么捕獲呢～～

// 非法標(biāo)識(shí)符a->b，真心捕獲不到啊親～！
try{
  a->b = 1
} catch(e){
  console.log(e)
}

?這時(shí)大家會(huì)急不可待地問：“異步代碼的異常咋辦呢？語法異常咋辦呢？”在解答上述疑問前，我們先偏離一下，稍微挖挖throw語句的特性。

try{
  throw "unexpected operation happen..."
} catch(e){
  console.log(e)
}

try{
  throw TypeError("unexpected operation happen...")
} catch(e){
  if ("TypeError" == e.name){
    // Do something1
  }
  else if ("RangeError" == e.name){
    // Do something2
  }
}

@description window.onerror處理函數(shù)
@param {string} message - 異常信息"
@param {string} source  - 發(fā)生異常的腳本的URI
@param {number} lineno  - 發(fā)生異常的腳本行號(hào)
@param {number} colno   - 發(fā)生異常的腳本列號(hào)
@param {?Error} error   - Error實(shí)例，Safari和IE10中沒有這個(gè)實(shí)參

window.onerror = function(message, source, lineno, colno, error){
  // Do something you like.
}

setTimeout(function(){ throw Error("oh no!") }, 0)
a->b = 1

// 有異常沒問題啊，因?yàn)槲铱床坏絕_^
window.onerror = function(){return true}

// 方式1
Promise.reject("anything you want")

// 方式2
new Promise(function(resolve, reject) { reject("anything you want") })

// 方式3
new Promise(function{ throw "anything you want" })
new Promise(function(r) { r(Error("anything you want" ) }).then(function(e) { throw e })

new Promise(function(resolve, reject){
  setTimeout(reject, 0)
}).catch(function(e){
  console.log("catch")
  return "bingo"
}).then(function(x){
  console.log(x)
})

// 回顯 bingo

window.addEventListener("unhandledrejection", function(e){
  // Event新增屬性
  // @prop {Promise} promise - 狀態(tài)為rejected的Promise實(shí)例
  // @prop {String|Object} reason - 異常信息或rejected的內(nèi)容

  // 會(huì)阻止異常繼續(xù)拋出，不讓Uncaught(in promise) Error產(chǎn)生
  e.preventDefault()
})

var p = new Promise(function(resolve, reject){
  setTimeout(reject, 0)
})
setTimeout(function(){
  p.catch(function(e){
    console.log("catch")
    return "bingo"
  })
}, 1000)

window.addEventListener("rejectionhandled", function(e){
  // Event新增屬性
  // @prop {Promise} promise - 狀態(tài)為rejected的Promise實(shí)例
  // @prop {String|Object} reason - 異常信息或rejected的內(nèi)容

  // Uncaught(in promise) Error已經(jīng)拋出，所以這句毫無意義^_^
  e.preventDefault()
})

window.addEventListener("error", function(e){
  // Do something
  console.log(e.bubbles) // 回顯false
}, true)