前言

编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外。对于业务用例的例外我们别无它法,必须要求实施人员与用户共同提供合理的解决方案;而技术上的例外,则必须由我们码农们手刃之,而这也是我想记录的内容。

我打算分成《前端魔法堂——异常不仅仅是try/catch》和《前端魔法堂——调用栈,异常实例中的宝藏》两篇分别叙述内置/自定义异常类,捕获运行时异常/语法异常/网络请求异常/PromiseRejection事件,什么是调用栈和如何获取调用栈的相关信息。

是不是未出发就已经很期待呢?好吧,大家捉紧扶手,老司机要开车了^_^

概要

本篇将叙述如下内容:

一.异常还是错误?它会如何影响我们的代码?

在学习Java时我们会被告知异常(Exception)和错误(Error)是不一样的,异常是不会导致进程终止从而可以被修复(try/catch),但错误将会导致进程终止因此不能被修复。当对于JavaScript而言,我们要面对的仅仅有异常(虽然异常类名为Error或含Error字样),异常的出现不会导致JavaScript引擎崩溃,最多就是让当前执行的任务终止而已。

上面说到异常的出现最多就是让当前执行的任务终止,到底是什么意思呢?这里就涉及到Event Loop的原理了,下面我尝试用代码大致说明吧。

// 1.当前代码块将作为一个任务压入任务队列中,JavaScript线程会不断地从任务队列中提取任务执行;

// 2.当任务执行过程中报异常,且异常没有捕获处理,则会一路沿着调用栈从顶到底抛出,最终终止当前任务的执行;

// 3.JavaScript线程会继续从任务队列中提取下一个任务继续执行。

function a(){throw Error("test")}

function b(){a()}

b()

console.log("永远不会执行!")

// 下一个任务

console.log("你有你抛异常,我照样执行!")

二.内置异常类型有哪些?

说到内置异常类那么必先提到的就是Error这个祖先类型了,其他所有的内置异常类和自定义类都必须继承它。而它的标准属性和方法就以下这寥寥几个而已

@prop {String} name - 异常名称

@prop {String} message - 供人类阅读的异常信息

@prop {Function} constructor - 类型构造器

@method toString():String - 输出异常信息

由于标准属性实在太少,无法提供更有效的信息供开发者定位异常发生的位置和重现事故现场,因此各浏览器厂家均手多多的自己增加些属性,然后逐渐成了事实标准。

@prop {String} fileName - 异常发生的脚本URI

@prop {number} lineNumber - 异常发生的行号

@prop {number} columnNumber - 异常发生的列号

@prop {String} stack - 异常发生时的调用栈信息,IE10及以上才支持

@method toSource():String - 异常发生的脚本内容

另外巨硬还新增以下两个属性

@prop {String} description - 和message差不多

@prop {number} number - 异常类型的编号,巨硬为每个异常设置了一个唯一的编号

那么现在我要实例化一个Error对象,只需调用Error()或new Error()即可;若想同时设置message,则改为Error("test")或new Error("test")。其实Error的构造函数签名是这样的

@constructor

@param {String=} message - 设置message属性

@param {String=} fileName - 设置fileName属性

@param {number=} lineNumber - 设置lineNUmber属性

现在我们看看具体有哪些内置的异常类型吧!

EvalError,调用eval()时发生的异常,已被废弃只用于向后兼容而已

InternalError,JavaScript引擎内部异常,FireFox独门提供的!

RangeError,当函数实参越界时发生,如Array,Number.toExponential,Number.toFixed和Number.toPrecision时入参非法时。

ReferenceError,当引用未声明的变量时发生

SyntaxError,解析时发生语法错误

TypeError,当值不是所期待的类型时,null.f()也报这个错

URIError,当传递一个非法的URI给全局URI处理函数时发生,如decodeURIComponent('%'),即decodeURIComponent,decodeURI,encodeURIComponent,encodeURI

三.动手写自己的异常类型吧!

关于在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实现如下

(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)

四.捕获“同步代码”中的"运行时异常",用try/catch就够了

为了防止由于异常的出现,导致正常代码被略过的风险,我们习惯采取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)))))

很多时我们会以为这样书写就万事大吉了,但其实try/catch能且仅能捕获“同步代码”中的"运行时异常"。

1."同步代码"就是说无法获取如setTimeout、Promise等异步代码的异常,也就是说try/catch仅能捕获当前任务的异常,setTimeout等异步代码是在下一个EventLoop中执行。

// 真心捕获不到啊亲~!

try{

setTimeout(function(){

throw Error("unexpected operation happen...")

}, 0)

} catch(e){

console.log(e)

}

2."运行时异常"是指非SyntaxError,也就是语法错误是无法捕获的,因为在解析JavaScript源码时就报错了,还怎么捕获呢~~

// 非法标识符a->b,真心捕获不到啊亲~!

try{

a->b = 1

} catch(e){

console.log(e)

}

这时大家会急不可待地问:“异步代码的异常咋办呢?语法异常咋办呢?”在解答上述疑问前,我们先偏离一下,稍微挖挖throw语句的特性。

throw后面可以跟什么啊?

一般而言我们会throw一个Error或其子类的实例(如throw Error()),其实我们throw任何类型的数据(如throw 1,throw "test",throw true等)。但即使可以抛出任意类型的数据,我们还是要坚持抛出Error或其子类的实例。这是为什么呢?

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

}

}

原因显然易见——异常发生时提供信息越全越好,更容易追踪定位重现问题嘛!

五."万能"异常捕获者window.onerror,真的万能吗?

在每个可能发生异常的地方都写上try/catch显然是不实际的(另外还存在性能问题),即使是罗嗦如Java我们开发时也就是不断声明throws,然后在顶层处理异常罢了。那么,JavaScript中对应的顶层异常处理入口又在哪呢?木有错,就是在window.onerror。看看方法签名吧

@description window.onerror处理函数

@param {string} message - 异常信息"

@param {string} source - 发生异常的脚本的URI

@param {number} lineno - 发生异常的脚本行号

@param {number} colno - 发生异常的脚本列号

@param {?Error} error - Error实例,Safari和IE10中没有这个实参

这时我们就可以通过它捕获除了try/catch能捕获的异常外,还可以捕获setTimeout等的异步代码异常,语法错误。

window.onerror = function(message, source, lineno, colno, error){

// Do something you like.

}

setTimeout(function(){ throw Error("oh no!") }, 0)

a->b = 1

这样就满足了吗?还没出大杀技呢——屏蔽异常、屏蔽、屏~~

只有onerror函数返回true时,异常就不会继续向上抛(否则继续上抛就成了Uncaught Error了)。

// 有异常没问题啊,因为我看不到^_^

window.onerror = function(){return true}

现在回到标题的疑问中,有了onerror就可以捕获所有异常了吗?答案又是否定的(我的娘啊,还要折腾多久啊~0~)

Chrome中对于跨域脚本所报的异常,虽然onerror能够捕获,但统一报Script Error。若要得到正确的错误信息,则要配置跨域资源共享CORS才可以。

window.onerror实际上采用的事件冒泡的机制捕获异常,并且在冒泡(bubble)阶段时才触发,因此像网络请求异常这些不会冒泡的异常是无法捕获的。

Promise.reject产生的未被catch的异常,window.onerror也是无能为力。

六.Promise.reject也抛异常,怎么办?

通过Promise来处理复杂的异步流程控制让我们得心应手,但倘若其中出现异常或Promise实例状态变为rejected时,会是怎样一个状况,我们又可以如何处理呢?

Promise是如何标识异常发生的?

Promise实例的初始化状态是pending,而发生异常时则为rejected,而导致状态从pending转变为rejected的操作有

调用Promise.reject类方法

在工厂方法中调用reject方法

在工厂方法或then回调函数中抛异常

// 方式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 })

当Promise实例从pending转变为rejected时,和之前谈论到异常一样,要么被捕获处理,要么继续抛出直到成为Uncaught(in promise) Error为止。

异常发生前就catch掉

若在异常发生前我们已经调用catch方法来捕获异常,那么则相安无事

new Promise(function(resolve, reject){

setTimeout(reject, 0)

}).catch(function(e){

console.log("catch")

return "bingo"

}).then(function(x){

console.log(x)

})

// 回显 bingo

专属于Promise的顶层异常处理

若在异常发生前我们没有调用catch方法来捕获异常,还是可以通过window的unhandledrejection事件捕获异常的

window.addEventListener("unhandledrejection", function(e){

// Event新增属性

// @prop {Promise} promise - 状态为rejected的Promise实例

// @prop {String|Object} reason - 异常信息或rejected的内容

// 会阻止异常继续抛出,不让Uncaught(in promise) Error产生

e.preventDefault()

})

迟来的catch

由于Promise实例可异步订阅其状态变化,也就是可以异步注册catch处理函数,这时其实已经抛出Uncaught(in promise) Error,但我们依然可以处理

var p = new Promise(function(resolve, reject){

setTimeout(reject, 0)

})

setTimeout(function(){

p.catch(function(e){

console.log("catch")

return "bingo"

})

}, 1000)

另外,还可以通过window的rejectionhandled事件监听异步注册catch处理函数的行为

window.addEventListener("rejectionhandled", function(e){

// Event新增属性

// @prop {Promise} promise - 状态为rejected的Promise实例

// @prop {String|Object} reason - 异常信息或rejected的内容

// Uncaught(in promise) Error已经抛出,所以这句毫无意义^_^

e.preventDefault()

})

注意:只有抛出Uncaught(in promise) Error后,异步catch才会触发该事件。

七.404等网络请求异常真心要后之后觉吗?

也许我们都遇到报404网络请求异常的情况,然后测试或用户保障怎么哪个哪个图标没有显示。其实我们我们可以通过以下方式捕获这类异常

window.addEventListener("error", function(e){

// Do something

console.log(e.bubbles) // 回显false

}, true)

由于网络请求异常不会冒泡,因此必须在capture阶段捕获才可以。但还有一个问题是这种方式无法精确判断异常的HTTP状态是404还是500等,因此还是要配合服务端日志来排查分析才可以。

总结

对异常和如何捕获异常仅仅是前端智能监控中的一小撮知识点,敬请期待后续另一小撮知识点《前端魔法堂——调用栈,异常实例中的宝藏》吧:D

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohn... ^_^肥仔John

参考

php 该throw还是该404,前端魔法堂——异常不仅仅是try/catch相关推荐

  1. 前端魔法堂——异常不仅仅是try/catch

    前言  编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外.对于业务用例的例外我们别无它法,必须要求实施人员与 ...

  2. Java异常之try,catch,finally,throw,throws

    Java异常之try,catch,finally,throw,throws 你能区分异常和错误吗? 我们每天上班,正常情况下可能30分钟就能到达.但是由于车多,人多,道路拥挤,致使我们要花费更多地时间 ...

  3. JAVA day24,25,26 异常(try、catch、finally、throw、throws),线程(Thread、Runnable、Callable)

    一.异常 异常 :指的是程序在执⾏过程中,出现的⾮正常的情况,最终会导致JVM的⾮正常停⽌. 在Java等⾯向对象的编程语⾔中,异常本身是⼀个类,产⽣异常就是创建异常对象并抛出了⼀个 异常对象.Jav ...

  4. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...

  5. c#_异常捕获(try catch finally、throw)

    c#异常处理所用到的关键字 1)try 用于检查发生的异常,并帮助发送任何可能的异常 2)  catch  以控制权更大的方式处理错误,可以有多个catch子句 3)finally 无论是否引发了异常 ...

  6. 面向对象回顾(异常(try、catch、throw、throws和finally)、接口和抽象类、面向对象特征、泛型(extends/super))

    1. 异常 1.1 JAVA语言如何进行异常处理 Java 通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口. 在Java中,每个异常都是一个对象,它是Throwable类 ...

  7. long型长整数字在前端页面显示异常及其解决方法

    文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一 ...

  8. Velocity魔法堂系列二:VTL语法详解

    一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...

  9. 阿里云前端周刊 - 第 29 期

    推荐 1. RESTful API 设计最佳实践 https://blog.philipphauer.de/... 项目资源的URL应该如何设计?用名词复数还是用名词单数?一个资源需要多少个URL?用 ...

最新文章

  1. sequelize 增加数据库字段_使用Sequelize动态创建新表
  2. 微盟涉嫌二清,大商户模式将受理严监管
  3. 2015年php行情最好,2015年度最流行PHP框架调查结果出炉,Laravel居首
  4. long 比较大小_Long-Term Feature Banks
  5. asp 中使用Ftp.exe 上传大文件
  6. 谜题 (Puzzle,ACM/ICPC World Finals 1993,UVa227)
  7. NOIP模拟测试26「嚎叫响彻在贪婪的机房·主仆见证了 Hobo 的离别·征途堆积出友情的永恒」...
  8. python123蟒蛇代码_[蟒蛇菜谱] Python封装shell命令
  9. 优酷 米兔机器人_米兔机器人如何发豆芽?
  10. POJ1061 青蛙的约会【扩展欧几里得算法】
  11. static数据的初始化
  12. SQL入门基础视频教程-Visual Foxpro视频教程
  13. react ssr方法
  14. NR中关于RE、RB、CRB、PRB、VRB、REG、RBG、CCE等概念
  15. Roadrunner安装与简单使用
  16. java获取时分秒毫秒_java 中毫秒数转换成时分秒格式java中有什么方法可以把一个毫秒数格式化成”时:分:秒”...
  17. 2018.9.13 贷款月供计算器
  18. 面试系列-3 限流场景实践
  19. word中在指定位置插入图片
  20. ANO匿名飞控分析(2)— 任务调度

热门文章

  1. 架设自己的WebDAV服务器作为AutoCAD WS的数据存储
  2. 跟互联力量学Asp.net MVC3-安装和创建
  3. “Duke选择大奖”荟萃2009最具创新的Java技术应用
  4. 收集Oracle常用命令----索引及约束
  5. 解决IE更新对FLASH产生影响
  6. FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
  7. leetcode 101 Symmetric Tree
  8. 超融合刚刚好——蓝色光标成功应用联想超融合解决方案
  9. 利用隐藏神经元解决异或问题的小型示例程序
  10. “cannot resolve symbol R” in Android Studio