代码不会全部按照我们的预期运行,可能会有意料之外的情况,为了保证程序的健壮性,要进行异常处理。

比如一个对象的所有方法,都应该做异常处理,但是,如果每个方法都加 try catch 又太麻烦:

const obj = {
    aaa() {
        try {
            // aaa
        } catch(e) {
            // xxxx
        } 
    },
    bbb() {
        try {
            // bbb
        } catch(e) {
            // xxxx
        } 
    },
    ccc() {
        try {
            // ccc
        } catch(e) {
            // xxxx
        } 
    }
}

有没有一种方式既能对所有方法做异常处理,又不用重复写这么多次呢?

有,就是代理模式。

代理模式是通过对目标对象做一层包装,提供和目标对象同名的方法,最终的功能实现还是调用目标对象的方法,但可以额外添加一些职责,比如日志、权限等,透明地对目标对象做一些扩充。

比如 React 里的高阶组件就是代理模式的实现,可以透明的扩展被包装的组件的功能。

很明显,这里的异常处理,也可以用代理的方式来做。但不用完全自己实现,ES6 提供了 Proxy,可以基于它来实现。

定义 createProxy 方法来实现代理,创建一个 Proxy 对象,对目标对象 target 做一层包装,定义 get、set 时的处理:

function createProxy(target) {
    const proxy = createExceptionProxy();
    return new Proxy(target, {
        get: proxy,
        set: proxy
    });
}

function createExceptionProxy() {
    return (target, prop) => {
        if (!(prop in target)) {
            return;
        }

        if (typeof target[prop] === 'function') {
            return createExceptionZone(target, prop);
        }

        return target[prop];
    }
}

如果 target 不包含 prop,就返回空,否则返回对应的属性值 target[prop]。

如果属性值是函数,则做一层包装:

function createExceptionZone(target, prop) {
    return (...args) => {
        let result;
        ExceptionsZone.run(() => {
          result = target[prop](...args);
        });
        return result;
    };
}

最终的功能实现还是调用 target,传入参数,把调用结果作为代理方法的结果返回。

包装这一层的目的是为了做异常处理,也就是 ExceptionsZone.run 做的事情:

class ExceptionsZone {
    static exceptionHandler = new ExceptionHandler();

    static run(callback) {
      try {
        callback();
      } catch (e) {
        this.exceptionHandler.handle(e);
      }
    }
}

调用目标方法,并做 try catch,当出现异常的时候,用 ExceptionHandler 来处理。

这里的异常处理我们就简单打印下日志:

class ExceptionHandler {
    handle(exception) {
        console.log('记录错误:',exception.message, exception.stack);
    }
}

这样就实现了给目标对象的所有方法添加异常处理的目的。

测试下:

const obj = {
    name: 'guang',
    say() {
        console.log('Hi, I\'m '   this.name);
    },
    coding() {
        //xxx
        throw new Error('bug');
    }
    coding2() {
        //xxx
        throw new Error('bug2');
    }
}

const proxy = createProxy(obj);

proxy.say();
proxy.coding();

这里的 coding、coding2 方法都会抛出异常,但并没有做异常处理,我们用代理给它加上:

我们成功地通过代理模式给对象方法添加了异常处理!

但是现在这样还是有问题的,比如我把 coding 方法改为 async 的就不行了:

那怎么办呢?能不能统一对异步和同步方法做代理呢?

确实没办法,因为没法区分方法是同步还是异步,而且这两种方法的调用方式也不同,但我们可以单独提供一个 runner 方法来运行这些异步逻辑:

class ExceptionsZone {
    static exceptionHandler = new ExceptionHandler();

    static async asyncRun(callback) {
      try {
        await callback();
      } catch (e) {
        this.exceptionHandler.handle(e);
      }
    }
}

然后这样运行:

(async function() {
    await ExceptionsZone.asyncRun(proxy.coding2);
})();

这样就能处理异步逻辑中的异常了:

我们通过代理的方式给对象的所有同步方法添加了异常处理,然后又提供了运行异步方法的 runner 函数,对异步的异常做了处理,结合这两种方式,优雅地给目标对象的所有方法加上了异常处理。

可能你会说,代理就代理,你定义这么多 class 干啥?

因为这段逻辑是我从 Nest.js 源码里摘出来的,它源码里就是这样来给对象添加异常处理的:

异步逻辑也是单独提供了个方法来运行:

我觉得这个透明给对象添加异常处理的方式很优雅,就把它从 Nest.js 源码里抽了出来。

完整代码如下:

function createProxy(target) {
    const proxy = createExceptionProxy();
    return new Proxy(target, {
        get: proxy,
        set: proxy
    });
}

function createExceptionProxy() {
    return (receiver, prop) => {
        if (!(prop in receiver)) {
            return;
        }

        if (typeof receiver[prop] === 'function') {
            return createExceptionZone(receiver, prop);
        }

        return receiver[prop];
    }
}

function createExceptionZone(receiver, prop) {
    return (...args) => {
        let result;
        ExceptionsZone.run(() => {
          result = receiver[prop](...args);
        });
        return result;
    };
}

class ExceptionHandler {
    handle(exception) {
        console.log('记录错误:',exception.message, exception.stack);
    }
}

class ExceptionsZone {
    static exceptionHandler = new ExceptionHandler();
  
    static run(callback) {
      try {
        callback();
      } catch (e) {
        this.exceptionHandler.handle(e);
      }
    }
  
    static async asyncRun(callback) {
      try {
        await callback();
      } catch (e) {
        this.exceptionHandler.handle(e);
      }
    }
}

const obj = {
    name: 'guang',
    say() {
        console.log('Hi, I\'m '   this.name);
    },
    coding() {
        //xxx
        throw new Error('bug');
    },
    async coding2() {
        //xxx
        throw new Error('bug2');
    }
}

const proxy = createProxy(obj);

proxy.say();
proxy.coding();

(async function() {
    await ExceptionsZone.asyncRun(proxy.coding2);
})();

总结

为了保证健壮性,我们要对所有可能报错的代码添加异常处理,但是每个方法都添加 try catch 又太麻烦,所以我们利用 Proxy 实现了代理,透明的给对象的所有方法都添加上了异常处理。

但是,代理添加的只是同步的异常处理,并没有捕获异步逻辑的异常,我们可以单独定义一个函数来运行异步方法。

结合代理 提供运行异步方法的 runner 这两种方式,就能给一个没有做任何异常处理的对象加上异常处理。是不是很优雅~

到此这篇关于如何利用Proxy更优雅地处理异常的文章就介绍到这了,更多相关Proxy更优雅处理异常内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

如何利用Proxy更优雅地处理异常详解的更多相关文章

  1. Java异常Exception详细讲解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  2. vue3中proxy的基本用法说明

    这篇文章主要介绍了vue3中proxy的基本用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 浅谈PHP中的错误处理和异常处理

    下面小编就为大家带来一篇浅谈PHP中的错误处理和异常处理。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. Java如何主动从当前线程获取异常信息

    这篇文章主要介绍了Java如何主动从当前线程获取异常信息,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  5. Java异常分类处理抛出捕获操作详解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  6. PHP中的异常及其处理机制

    这篇文章主要介绍了PHP中的异常及其处理机制,帮助大家更好的理解和学习使用PHP,感兴趣的朋友可以了解下

  7. Java线程的异常处理机制详情

    这篇文章主要介绍了Java线程的异常处理机制详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  8. JQuery之proxy实现绑定代理方法

    下面小编就为大家带来一篇JQuery之proxy实现绑定代理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. Java异常架构和异常关键字图文详解

    Java异常是Java提供的一种识别及响应错误的一致性机制,下面这篇文章主要给大家介绍了关于Java异常架构和异常关键字的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  10. PHP中错误与异常的日志记录用法分析

    这篇文章主要介绍了PHP中错误与异常的日志记录用法,较为详细的分析了php中错误与异常的区别以及日志记录的相应使用技巧,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部