2018-04-22-JS中的错误处理

上周学习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:

1. 所有调接口的地方，如：

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);
        }
      });
  }

2. 一些需要被其他模块频繁调用的公共函数，如工具函数
   以下是一个检查状态码的工具函数：

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

想象我自己写的时候压根没想过要去做错误处理，23333.....
看看红宝书上的规则，基本符合我发现的规律：

什么时候自己来捕捉处理错误

第三个问题，平常我遇到错误是怎么弄的？

错误现象大概分这样几种：

1. 代码跑出来没达到预期的效果（没任何反应，跑错了等）；
2. 页面直接崩掉了；
3. 数据不对劲；

我犯的最多的错误：

1. 逻辑没理顺，导致代码跑偏了不受控制了；
2. 对使用的框架工具理解不深入，使用上犯了一些忌讳而导致出错；
3. 没对数据做验证和过滤，场景没考虑周全，导致一些意料之外的情况发生。

我怎么做的：

1. 根据错误现象大概判断一个错误类型；
2. 检查一下拼写等，排掉低级错误；
3. 对于复杂的业务流程，动手写之前先画个流程图整理一下逻辑思路，写完发现错误后，预测发生错误的地方打上断点看看代码有没有跑偏，数据对不对；
4. 上stackoverflow找找有没有类似问题，看看网友如何解决，这招对框架，第三方库出问题尤其有用；
5. 实在不行，还有一招必杀技：git回滚！！只要你提交频繁，你总会发现出错的那一行！哈哈哈～
   PS：还有师傅教我的一招，在Chrome审查元素里选中某个dom节点，然后在控制台$0就可以取到这个dom对象，然后就可以对这个节点进行各种骚骚的操作了～

最后借用红宝书来做个总结：

总结