文档章节

前端JS 异常处理实践

SEOwhywhy
 SEOwhywhy
发布于 2018/11/25 20:47
字数 1797
阅读 0
收藏 0

  前端异常处理,常见的场景是在“异步请求”的操作过程当中,所谓“异常”---就是“不正常”,程序的运行不符合我们的预期。
  
  程序“正常”的处理,是我们在开发过程当中的“重中之重”,是必要的“硬性指标”。
  
  而“异常处理”,很多时候可能连“指标”都没有,更谈不上什么“硬性指标”了,所以,在开发当中是很容易被忽略的一个“主题”。
  
  但是,“提高用户体验”与“提高程序可控性”又是两个永恒的主题,“枝繁叶茂”就是我们追求的目标(枝---主功能;叶---细节;)。
  
  在追求“枝繁叶茂”的过程当中,“异常处理”就是细节当中的重中之重,故此,对此进行了如下实践:
  
  常见的“异步请求”操作: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) www.mingcheng178.com=>{
  
  console.log('二次then执行OK',data);//执行OK
  
  })
  
  .catch((err) www.dfgjpt.com=>{
  
  console.error('嘿',err);//并没有执行
  
  })
  
  复制代码
  
  实践3:当程序 reject 时,在后续“子1级”then操作当中注册的reject handle执行---验证1,其他注册的resolve handle与catch并未执行;
  
  复制代码
  
  new Promise((res, rej) www.yongshiyule178.com=>{
  
  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) www.gcyL157.com=>{
  
  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) www.meiwanyule.cn=>{
  
  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) =www.mhylpt.com>{
  
  console.log('异步执行OK1',data);//并没有执行
  
  })
  
  .then((data) =>{
  
  console.log('异步执行OK2',data);//并没有执行
  
  })
  
  .then((data)www.mcyllpt.com/ =>{
  
  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 正常,程序都进入该环节

© 著作权归作者所有

SEOwhywhy
粉丝 9
博文 155
码字总数 342404
作品 0
私信 提问
阿里UC百亿PV的前端监控平台:(2)前端采集上报

本文首发于知乎 《阿里UC百亿级PV的前端监控平台实践》 ,搬运转载请注明出处,否则追究版权责任。 阿里UC百亿PV的前端监控平台实践 系列文章: 阿里UC百亿PV的前端监控平台:(1)概述 阿里U...

杂货铺老板
10/17
0
0
一步一步搭建前端监控系统:JS错误监控篇

摘要: 徒手写JS错误监控。 作者:一步一个脚印一个坑 原文:搭建前端监控系统(二)JS错误监控篇 Fundebug经授权转载,版权归原作者所有。 背景:市面上的监控系统有很多,大多收费,对于小...

Fundebug
07/06
0
0
收集错误信息及堆栈-前端监控之数据收集篇

js错误是第一指标,任何一个js错误都有可能导致阻塞,影响我们页面的正常运转。 本篇主要对js错误收集的分享 1. 了解异常发生的情况和影响 注: 了解异常发生的情况及影响, 有助于我们选择合...

hugh_
08/27
0
0
PWA系列 - Service Workers 异常处理

前言 前端在写PWA页面时, 经常会遇到ServiceWorker注册失败, 或ServiceWorker执行具体业务逻辑时失败, 但又连不上devtools, 或者连上了而从devtools能获取到的异常信息非常有限。本文详细...

atuanxy
2018/07/10
0
0
SaturnJS 2.0 发布 —— 轻量级JS框架

SaturnJS是一款轻量级JS框架,具有调用灵活和内核小巧等特点。 SaturnJS采用按需加载的方式加载各类JS插件,部分插件采用网上开源的JS代码,并且非常易于扩展,帮助开发者快速创建自己的JS代...

红薯
2011/03/02
2.8K
2

没有更多内容

加载失败,请刷新页面

加载更多

总结:ElasticSearch查询

环境:ES2.3.2 地址:xxx:9200 注意动词使用:GET,POST,PUT,DELETE ElasticSearch PK Mysql 我的告警页面,查询条件会status='OK',isalarm=1,时间范围在:2019-03-01 13:45:41 到 2019......

浮躁的码农
15分钟前
3
0
简单的Cloud Toolkit教程,助你秒部署应用程序

1.什么是Cloud Toolkit Cloud Toolkit 是开发者本地 IDE 中的一款插件,可以帮助开发者更高效地开发、测试、诊断并部署应用。通过这个插件,可以==将本地应用一键部署到任意服务器==,甚至部...

small-bug
20分钟前
8
0
Linux系统产生随机数方法

系统环境变量($RANDOM) 范围:0~32767 加密:md5sum 加盐:stu echo $RANDOM echo $RANDOM |md5sum echo "stu$RANDOM" |md5sum |cut -c 8-15 openssl openssl rand -base64 8 时间......

Mustbecool
23分钟前
1
0
【2019年8月】OCP 071认证考试最新版本的考试原题-第14题

Choose two. Examine this SQL statement: UPDATE orders o SET customer_name = (SELECT cust_last_name FROM customers WHERE customer_id=o.customer_id); Which two are true? A) The su......

oschina_5359
31分钟前
2
0
功能测试与非功能测试

根据一份报告,应用程序崩溃导致71%的卸载。迫使用户卸载应用程序的其他原因是页面响应时间,混乱的UI,电池消耗等。这表明功能测试和非功能测试对于交付用户友好型应用程序的重要性。因此,...

八音弦
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部