前端JS 异常处理实践

时间: 2018-11-26阅读: 769标签: 异常

前端异常处理,常见的场景是在“异步请求”的操作过程当中,所谓“异常”---就是“不正常”,程序的运行不符合我们的预期。

程序“正常”的处理,是我们在开发过程当中的“重中之重”,是必要的“硬性指标”。

而“异常处理”,很多时候可能连“指标”都没有,更谈不上什么“硬性指标”了,所以,在开发当中是很容易被忽略的一个“主题”。

但是,“提高用户体验”与“提高程序可控性”又是两个永恒的主题,“枝繁叶茂”就是我们追求的目标(枝---主功能;叶---细节;)。

在追求“枝繁叶茂”的过程当中,“异常处理”就是细节当中的重中之重,故此,对此进行了如下实践:

常见的“异步请求”操作: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
}

四.总结

1.当程序执行遇到“throw error”时,JS引擎会停止后续业务执行,程序直接进入catch环节;
(promise对象,try包裹的代码块)

2.promise:
--- resolve:
大多时候(除:网络故障与请求被阻止外),使用fetch()返回的 Promise被标记为resolve,
包括(接收到一个代表错误的 HTTP 状态码时,HTTP 响应的状态码是 404 或 500,但是,此时会将 resolve 的返回值的 ok 属性设置为 false,
如果需要进行细分,可以根据该属性进行细分---在“异步请求”中,处理的大多数异常或error针对该阶段异常)
--- reject:
使用fetch()返回的 Promise被标记为 reject的情况仅有两种(1.网络故障;2.请求被阻止(如“跨域”))

说明:当程序在reject时,如果后续没有注册“相关程序”来接收处理,那么,该reject会被catch处理,在该reject发生之后注册的一切reslove 业务将不会被执行;
当程序在reject时,如果后续有注册“相关程序”来接收处理,那么,该reject会被所“注册”的函数进行处理,在该注册函数之后的一切reslove 业务不会受该reject的影响,会依次执行,同时,catch不会被“该reject”触发;

3.try catch finally:
try{
#1运行代码
}
catch(err){
#1出错,程序直接进入该环节
}
finally{
#1出错 or 正常,程序都进入该环节
}

来源:https://www.cnblogs.com/pfsj/archive/2018/11/25/10017012.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1423

关闭

js中的异常处理

js中的异常处理语句有两个,一个是try……catch……,一个是throw。try……catch用于语法错误,错误有name和message两个属性。throw用于逻辑错误。对于逻辑错误,js是不会抛出异常的

两种JavaScript异常处理的方式

即:try 中语句不发生错误执行完毕后会执行 finally 中的语句,try 中的语句发生错误,则执行 catch中的语句,catch 中的语句执行完毕后也会执行 finally 中的语句。Error 基类型,即其他的错误类型都是从 Error 继承来的

从JavaScript到Python之异常

不少前端工程师看到这个标题可能会产生质问:我js用得好好的,能后端能APP,为什么还要学习Python?至少有下面两个理由:

如何优雅的处理前端异常?

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情。

PHP异常处理机制

异常(Exception)是一种错误处理机制,用于在指定的错误发生时改变脚本的正常流程。当异常被触发时,当前代码状态被保存,代码执行被切换到预定义的异常处理器函数(如果有)

JavaScript错误处理权威指南

JavaScript 错误和一般处理 throw new Error(\'something went wrong\') 会在 JavaScript 中创建一个错误实例,并停止脚本的执行,除非你对错误做了一些处理。当你作为 JavaScript 开发者开启自己的职业生涯时,你自己很可能不会这样做

JavaScript 异常

try 语句使您能够测试代码块中的错误。catch 语句允许您处理错误。throw 语句允许您创建自定义错误。finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。

慎用try catch

ECMA-262第3版引入了try catch语句,作为JavaScript中处理异常的一种标准方式。基本的语法如下所示。但是在前端js代码中很少看到try catch语句,并不是所以代码都需要加try catch来作得不偿失的保险

Flutter-package导入异常

Waiting for another flutter command to release the startup lock… 异常解决,平时我们在开发flutter过程中,在执行flutter packages get命令之后,如果运气不好的,命令没有执行成功的话,我们就会遇到这个错误提示:

关于try、catch、finally的执行顺序

try中没有抛出异常,则catch语句不执行,如果有finally语句,则接着执行finally语句,继而接着执行finally之后的语句;不管是否try...catch,finally都会被执行。当try...catch中有return的话,finally后会执行try...catch中的return

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!