上周学习promise的时候，发现了catch方法不仅可以充当reject的回调，还能捕捉resolve回调中的错误；除此之外，在一些例子中还看到用throw new Error('error')主动抛出错误的例子。
想想我自己平常写代码的时候很少会注意错误处理这一点，所以决定来看看书改进一下。
首先，我的第一个问题是：try-catch 和 new throw怎么用？
function divide(a, b){
try{
console.log(a/b);
// 试图调用一个不存在的方法
window.someNonexistentFunction();
}catch(error){
console.log('erroe:', error);
}
}
divide(1,0);
输出：
Infinity
error: ReferenceError: someNonexistentFunction is not defined
at divide (/Users/didi/project/demos/errorhandler.js:5:7)
at Object.<anonymous> ......
和java的套路一样，用try包裹可能出错的代码，然后在catch里处理错误信息。
上边这个例子，试图调用一个不存在的方法，这种错误成功捕捉到了，分母为0这种情况处理成了Infinity 。其实，就算我不用try-catch，执行结果也是一样的，因为运行环境会帮我们抛出错误。那如果我想当分母为0时抛出一个自定义的错误该怎么做？
来看看throw的用法：
function divid(a, b) {
if(b === 0)throw new Error('cannot divid!');
return a/b;
}
divid(1,0);
输出：
localhost:demos didi$ node errorhandler.js
/Users/didi/project/demos/errorhandler.js:25
if(b === 0)throw new Error('cannot divid!');
^
Error: cannot divid!
at divid (/Users/didi/project/demos/errorhandler.js:25:22)
at Object.<anonymous> ...
用throw可以自定义我们想要抛出的错误，用起来方便多了。
不仅如此，还可以根据需要抛出多种不同类型的错误：
接下来第二个问题，我什么时候需要做错误处理呢？
于是我打开了项目代码，看看师傅们在哪儿用了try-catch:
- 所有调接口的地方，如：
fetchChartInfo(id) {
const { refreshRate } = this.props;
axios
.get(`/dataScienceIDE/retrieve_dsql_chart/${id}`)
.then(({ status, data: res }) => {
if (status === 200 && res.status.errno === 0) {
const { dataConfig, staticType, paraConfig, chartType } = JSON.parse(
res.data.chart_contents
);
if (staticType === 'static') {
this.setState({
dataConfig,
staticType,
paraConfig,
chartType
});
} else {
this.runDynamicSql(dataConfig)
.then(newDataConfig => {
this.setState({
dataConfig: newDataConfig,
staticType,
paraConfig,
chartType
});
})
.catch(e => {
console.log('请求失败' + e);
});
}
} else {
message.error('请求失败');
}
})
.then(() => {
if (refreshRate && this.state.staticType === 'dynamic') {
this.interval(refreshRate);
} else if (timer) {
clearInterval(timer);
}
});
}
- 一些需要被其他模块频繁调用的公共函数，如工具函数
以下是一个检查状态码的工具函数：
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
想象我自己写的时候压根没想过要去做错误处理，23333.....
看看红宝书上的规则，基本符合我发现的规律：
第三个问题，平常我遇到错误是怎么弄的？
错误现象大概分这样几种：
- 代码跑出来没达到预期的效果（没任何反应，跑错了等）；
- 页面直接崩掉了；
- 数据不对劲；
我犯的最多的错误：
- 逻辑没理顺，导致代码跑偏了不受控制了；
- 对使用的框架工具理解不深入，使用上犯了一些忌讳而导致出错；
- 没对数据做验证和过滤，场景没考虑周全，导致一些意料之外的情况发生。
我怎么做的：
- 根据错误现象大概判断一个错误类型；
- 检查一下拼写等，排掉低级错误；
- 对于复杂的业务流程，动手写之前先画个流程图整理一下逻辑思路，写完发现错误后，预测发生错误的地方打上断点看看代码有没有跑偏，数据对不对；
- 上stackoverflow找找有没有类似问题，看看网友如何解决，这招对框架，第三方库出问题尤其有用；
- 实在不行，还有一招必杀技：git回滚！！只要你提交频繁，你总会发现出错的那一行！哈哈哈～
PS：还有师傅教我的一招，在Chrome审查元素里选中某个dom节点，然后在控制台$0就可以取到这个dom对象，然后就可以对这个节点进行各种骚骚的操作了～
最后借用红宝书来做个总结：
