promise 中的错误处理

js 中的错误处理.

 

分为三块吧.

第一:普通的js中 错误处理.

第二: promise 中的错误处理

第三: async 中的错误处理

 

第一: 普通的js 的错误处理 

 说普通是因为比较简单,算一个知识点没有太多啥说的,大家找找资料比较齐全

 

https://www.sitepoint.com/exceptional-exception-handling-in-javascript/

 

try{

 

    ...    //异常的抛出}

 

catch(e){

 

    ...    //异常的捕获与处理}

 

finally{

 

    ...    //结束处理}

 

第二: promise 中的错误处理

在promise 中处理错误,我们通常也是去try catch,但是 只能catch 到同步的错误,如果是异步的,比如我们settimeout一下其实是catch不到的.来个栗子:

 

var promise = new Promise(function(resolve, reject){

 

    setTimeout(function(){

 

        throw new Error('test')

 

    }, 0)

 

    resolve('ok'); //输出

 

});

 

promise

 

    .then(function(value){ console.log(value) })

 

    .catch(()=> console.log('err'))

 

 

 

 

栗子

可以看到,只输出了ok,然后浏览器捕获的错误,catch并没有拿到.

 

然后看看我们使用reject 来抛出错误

 

 

 

reject

可以看到,reject 会不停的返回到下一个,但是并不会被catch 到.如果我们试试throw 一个error呢?

 

throw error

通过一层层throw 在catch 里面我们是可以拿到的,疑问来来, 如果是通过 异步promise 里面reject 能catch 到么?

 

 

 

异步

依然是可以拿到的.

 

好啦最后总结一下吧.在promise 中, 如果使用reject 错误,必须要再每个then函数中throw 出去,不然在catch中无法拿到.其实我们不需要再次的throw ,在promise 正常catch 就好,比如在上面的异步中我们reject一下在最后就能catch到. 需要注意的一点就是:promise 中的错误是不会影响外层的运行,window.onerror 也是无法检测到的.

 

 

 

第三: async 中的错误处理

 

async用起来确实方便很多,promise 导致整段代码都是promise 的then ,如果判断太多导致代码逻辑复杂难以维护,而且每个then 都有自己的作用域,如果要贡献数据 通常要在外层新建一个.

 

直接贴代码吧,看看async 正常处理异步的方式

 

const f = () => {

 

  return new Promise((resolve, reject) => {

 

    setTimeout(() => {

 

      reject(234);

 

    }, 2000);

 

  });

 

};

 

const testAsync = () => {

 

  try {

 

    const t = await f();

 

    console.log(t);

 

  } catch (err) {

 

    console.log(err);

 

  }

 

};

 

testAsync();

 

 

可以看到,可以使用同步的方式来处理error,但是如果判断很多,多个异步又会导致到处都是判断和try catch.因此国外的大神Dima Grossman给出了一个解决方案.直接贴官方的传送门!

 

https://github.com/scopsy/await-to-js

 

 下面这个链接是一位大佬对await to js 使用中的改进.很值得一看,对优化自己的代码和流程很又帮助.

https://segmentfault.com/a/1190000011802045