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

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

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

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

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

常见的“异步请求”操作: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 正常,程序都进入该环节
}

前端JS 异常处理实践的更多相关文章

  1. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  2. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  3. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  4. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  7. 前端Js框架汇总【转】

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  8. WEB前端JS与UI框架

    前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...

  9. 前端Js框架汇总(工具多看)

    前端Js框架汇总(工具多看) 一.总结 一句话总结: 二.前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领 ...

随机推荐

  1. 洛谷P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…

    题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带走 ...

  2. alsa-lib 交叉编译以及声卡驱动测试 (转)

    l  下载alsa-utils, alsa-lib, 版本要一致 http://www.alsa-project.org/main/index.php/Download l  编译alsa-lib . ...

  3. Oracle数据库性能优化基础

    1.数据处理分类OLTP,OLAP 2.Oracle特性 3.数据库优化方法论/原则 方法论:自顶向下优化和自底向上优化 3.1 自顶向下优化 3.2 自底向上优化 对于多年的老系统出现性能问题时,就 ...

  4. 【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) B】Reach Median

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 将数组排序一下. 考虑中位数a[mid] 如果a[mid]==s直接输出0 如果a[mid]<s,那么我们把a[mid]改成s ...

  5. ASP.NET中的Webconfig 和 Global.asax区别

    Web.Config与Global.asax的区别: Config可以根据不同的错误类型定义不同的错误页,网站重定义转向新的错误页面. Global,在全局错误中写入应用程序事件错误信息,并在当前页输 ...

  6. POSIX 线程编程(二)线程建立与终止

    创建与终止线程 线程的管理常用的API有: pthread_create(thread,attr,start_routine,arg) pthread_exit(status) pthread_can ...

  7. HDU 1575 EASY

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  8. 【智能家居篇】wifi网络结构(上)

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! WIFI是什么.相信大家都知道,这里就不作说明了. 我们须要做的是深入了解其工作原理,包含软硬件.网络结构等.先说明 ...

  9. 【C/C++多线程编程之十】pthread线程私有数据

    多线程编程之线程私有数据      Pthread是 POSIX threads 的简称.是POSIX的线程标准.         线程同步从相互排斥量[C/C++多线程编程之六]pthread相互排 ...

  10. ClassNotFoundException和NoClassDefFoundError的差别

    正如它们的名字所说明的:NoClassDefFoundError是一个错误(Error),而ClassNOtFoundException是一个异常,在Java中错误和异常是有差别的,我们能够从异常中恢 ...