zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Elastic Stack之FileBeat使用实战
    Elastic Stack之Logstash进阶
    Elastic Stack之Logstash
    Elastic Stack之Elasticsearch 5.6.12 集群部署实战
    CentOS安装操作系统级初始优化
    Elastic Stack之搜索引擎基础
    ansible基础-ansible角色的使用
    ansible基础-playbook剧本的使用
    ansible基础-ansible的安装和常用模块介绍
    运维开发笔记整理-使用序列化
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12107956.html
Copyright © 2011-2022 走看看