前端JS 异常处理实践
前端异常处理,常见的场景是在“异步请求”的操作过程当中,所谓“异常”---就是“不正常”,程序的运行不符合我们的预期。
程序“正常”的处理,是我们在开发过程当中的“重中之重”,是必要的“硬性指标”。
而“异常处理”,很多时候可能连“指标”都没有,更谈不上什么“硬性指标”了,所以,在开发当中是很容易被忽略的一个“主题”。
但是,“提高用户体验”与“提高程序可控性”又是两个永恒的主题,“枝繁叶茂”就是我们追求的目标(枝---主功能;叶---细节;)。
在追求“枝繁叶茂”的过程当中,“异常处理”就是细节当中的重中之重,故此,对此进行了如下实践:
常见的“异步请求”操作:1.ajax(以$.ajax为例);2.fetch;
此处对这两种方式的“异常处理”进行了实践(包括try,catch,finally,throw error,new error(),console.error的运用),以fetch实践为主,由于fetch返回的实际上是promise对象,为了方便查看测试效果,此处直接使用promise对象代替说明。
一.$.ajax相关
$.ajax({ url: "/hello?name=平凡视界", type: "get", success: (data) =>{ //成功相关处理 console.log('返回数据',data) }, error: (err) =>{ //错误相关处理 404属于该处理(经测试) //还可能是"timeout", "error", "notmodified" 和 "parsererror"。 console.log('错误处理',err); } });
二.fetch相关
实践1:当程序运行遇到 throw error 时,js引擎会停止后续业务执行,程序直接进入catch环节;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ const error = new error('粗错啦~'); throw error; //js引擎会停止后续业务执行,程序直接进入catch环节 res('异步ok'); },3000) }) .then((data) =>{ console.log('异步执行ok',data);//并没有执行 },(data) =>{ console.log('异步执行拒绝',data);//并没有执行 }) .then((data) =>{ console.log('二次then执行ok',data);//并没有执行 }) .catch((err) =>{ console.error('嘿',err);//执行ok })
实践2:当程序 resolve 时,在后续then操作当中注册的resolve handle会顺次执行,注册的reject handle与catch并未执行;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ res('异步ok'); },3000) }) .then((data) =>{ console.log('异步执行ok',data);//执行ok },(data) =>{ console.log('异步执行拒绝',data);//并没有执行 }) .then((data) =>{ console.log('二次then执行ok',data);//执行ok }) .catch((err) =>{ console.error('嘿',err);//并没有执行 })
实践3:当程序 reject 时,在后续“子1级”then操作当中注册的reject handle执行---验证1,其他注册的resolve handle与catch并未执行;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ rej('异步失败'); },3000) }) .then((data) =>{ console.log('异步执行ok',data);//并没有执行 },(data) =>{ console.log('异步执行拒绝',data);//执行ok }) .then((data) =>{ console.log('二次then执行ok',data);//执行ok }) .catch((err) =>{ console.error('嘿',err);//并没有执行 })
实践4:当程序 reject 时,在后续“子2级”then操作当中注册的reject handle执行---验证2(子1级中,并没有注册reject handle相关的处理机制,故被在“子2级”then操作当中注册的reject handle接收,并执行处理),其他注册的resolve handle与catch并未执行;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ rej('异步失败'); },3000) }) .then((data) =>{ console.log('异步执行ok',data);//并没有执行 }) .then((data) =>{ console.log('二次then执行ok',data);//并没有执行 },(data) =>{ console.log('二次then"接收"reject异步"执行结果"(拒绝)',data);//执行ok }) .catch((err) =>{ console.error('嘿',err);//并没有执行 })
实践5:当程序 reject 时,在后续“子4级”then操作当中注册的reject handle执行---验证2(“子1级”至“子3级”中,并没有注册reject handle相关的处理机制,故被在“子4级”then操作当中注册的reject handle接收,并执行处理),其他注册的resolve handle与catch并未执行;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ rej('异步失败'); },3000) }) .then((data) =>{ console.log('异步执行ok1',data);//并没有执行 }) .then((data) =>{ console.log('异步执行ok2',data);//并没有执行 }) .then((data) =>{ console.log('异步执行ok3',data);//并没有执行 }) .then((data) =>{ console.log('二次then执行ok4',data);//并没有执行 },(data) =>{ console.log('二次then"接收"reject异步"执行结果"(拒绝)',data);//执行ok }) .catch((err) =>{ console.error('嘿',err);//并没有执行 })
实践6:当程序 reject 时,“子1级”至“子4级”中,并没有注册reject handle相关的处理机制,故被catch接收,并执行处理,其他注册的resolve handle并未执行;
new promise((res, rej) =>{ console.log('异步开始。。。'); settimeout(() =>{ rej('异步失败'); },3000) }) .then((data) =>{ console.log('异步执行ok1',data);//并没有执行 }) .then((data) =>{ console.log('异步执行ok2',data);//并没有执行 }) .then((data) =>{ console.log('异步执行ok3',data);//并没有执行 }) .then((data) =>{ console.log('异步执行ok4',data);//并没有执行 }) .catch((err) =>{ console.error('嘿',err);//执行ok-----rej的时候,“其后程序”没有对rejct进行相应处理时, //catch会接收该reject响应,并进行处理 })
三.try,catch,finally,throw error,new error(),console.error的运用;
try{ console.log("test"); throw new error('出错了吧?');//throw 后面的参数,会被catch中的e接收 } catch(e){ // e == '出错了吧?' console.error(e);// 出错了吧? } finally{ console.log('怎么都会执行');// 执行ok }
四.总结
try{ #1运行代码 } catch(err){ #1出错,程序直接进入该环节 } finally{ #1出错 or 正常,程序都进入该环节 }
上一篇: 六个分手后前男友还爱你的表现