在使用异步的终极解决方案-ES7的async/await同时，如何优雅的处理错误提高代码的兼容性让作为码农的我很头疼。在项目实战中合理的使用try…catch…让代码的兼容和稳定性大大增强。

本文将对 try…catch… 分成三个方面来叙述。

为什么要用
如何使用
实战

1、为什么要用 try…catch…

async function funcAsync(){
   console.log('\n---begin---\n');
   await ih_func();
   console.log('------end-----');
}

function ih_func(){
  return new Promise(function (resolve, reject) {
    //这里相当于throw一个异常了
    reject('error');
  });
}

funcAsync();

运行结果

你一定会好奇为什么只打印了begin而没有打印end，这是因为reject(‘error’); 相当于throw一个异常了，所以程序就不会继续往下执行了，想要程序继续执行下去就需要处理throw出来的异常。

2、如何使用 try…catch… 处理异常

async function funcAsync(){
   console.log('\n---begin---\n');
   try{
     await ih_func();
   } catch(e){
     console.log(e);
   }
   console.log('------end-----');
}

function ih_func(){
  return new Promise(function (resolve, reject) {
    //这里相当于throw一个异常了
    reject('error');
  });
}

funcAsync();

运行结果

惊奇的发现通过 try…catch… 处理异常后的程序神奇的执行完成了。

在try{}中的代码 throw 出来的异常会被 catch 捕获到，程序认为你处理异常了，所以继续往下执行了

3、 try…catch… 之实战

程序如何处理异常

async function funcAsync(){
  for(let i=0; i<3; i++){
    try{  
      console.log('\n---begin---\n');
      await ih_func();
      console.log('------end-----');
    } catch(e){
      console.log(e);
    }
    console.log('-----end2-----');
  }
}

function ih_func(){
  return new Promise(function (resolve, reject) {
    //这里相当于throw一个异常了
    reject('error');
  });
}

funcAsync();

运行结果

上面代码运行代码后发现，当 ih_func() throw出异常后，被外层的catch捕获并处理，而且直接跳出打印end2。并没有我们预期中，继续往下执行打印end。

多层try…catch… 如何处理异常

async function funcAsync_1(){
   try{  
     await funcAsync_2();
   } catch(e){
     console.log('funcAsync_1');
     console.log(e);
   }
   console.log('funcAsync_1 ----  end');
}

async function funcAsync_2(){
  for(let i=0; i<3; i++){
    console.log('\n---begin'+ i +'---\n');
    try{  
      await ih_func(i);
    } catch(e){
      console.log(e);
    }
    console.log('------end'+ i +'-----');
  }
}

function ih_func(args){
  return new Promise(function (resolve, reject) {
    //这里相当于throw一个异常了
    reject('error' + args);
  });
}

funcAsync_1();

运行结果

结论

一层 try…catch…的时候：当程序 throw 出异常后，被外层的catch捕获并处理，程序在catch捕获处继续执行下去。

多层try…catch…的时候：当程序 throw 出异常后，会被离异常最近的catch捕获并处理，程序在catch捕获处继续执行下去。

当程序throw出一个异常后，会从里往外一直寻找处理异常的catch，当找到离异常最近的catch时，会被这个catch处理，并不会再往外传递异常，而且会在catch处理当前代码行继续往下执行。

如何提高程序的健壮性

async function funcAsync(){
  for(let i=0; i<3; i++){
    console.log('\n---begin'+ i +'---\n');
    try{  
      await ih_func(i);
    } catch(e){
      console.log(e);
    }
    console.log('------end'+ i +'-----');
  }
}

function ih_func(args){
  return new Promise(function (resolve, reject) {
    //这里相当于throw一个异常了
    reject('error' + args);
  });
}

funcAsync();

运行结果

对于多个await Promise返回值的时候，可以对具有Promise返回值为reject的异步操作时，使用 try…catch…不仅可以增强代码的健壮性，而且使代码在我们预期中执行下去。

黄威龙的笔记

JavaScript 的错误处理

本文将对 try…catch… 分成三个方面来叙述。

1、为什么要用 try…catch…

2、如何使用 try…catch… 处理异常

3、 try…catch… 之实战

结论