Proxy用法——让我们创建一个API代理器

Proxy用法——让我们创建一个API代理器

什么是Javascript Proxy?

MDN对Proxy 的定义是:

Proxy对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。

通俗的将,Proxy对象是目标对象的一个代理器,任何对目标对象的访问,都必须通过该代理器。因此我们可以对外界的访问进行过滤改写等操作。

语法

target-用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组、函数,甚至另一个代理)。

handler-一个对象,其属性是当执行一个操作时定义代理的行为函数。

简单的示例

假设现在我们要访问一个对象的属性,如果该属性存在,打印该属性的值,否则报错。在没有Proxy对象之前,我们需要使用额外的方法来实现。如下:

上述代码虽然可以实现预期的功能,但如果我们能把检查属性是否存在的逻辑放到别的地方,会让我们更好的集中在业务逻辑代码上。这个时候我们就可以使用Proxy,下面让我们使用Proxy实现上面的功能。

我们给user对象添加了一个代理器,访问任何user的属性都会被代理器拦截,然后检查被访问的属性是否存在,如果存在就返回该属性值,否则报错。这样我们就可以在printUser方法中专心写与业务逻辑相关的代码了。

下面是另一个例子,我们在给对象属性赋值时进行拦截操作。

API代理器

最后,我们来看一个稍微复杂一点的例子,使用Proxy封装一个api对象,这里为了简介只写了get方法和post方法。

在handler对象中,set拦截操作可以阻止我们对api对象重新赋值,deleteProperty拦截操作可以阻止我们删除api对象的属性。通过get拦截操作,给api对象添加两个方法get和post,在调用这两个方法时会验证请求url或者data,最后根据服务器响应返回一个Promise对象。下面是使用get方法示例:

所以,当我们想要控制对象的某些默认行为时,就可以考虑使用Proxy。

本文由 AiChinaTech 作者:AiChinaTech 发表,其版权均为 AiChinaTech 所有,文章内容系作者个人观点,不代表 AiChinaTech 对观点赞同或支持。如需转载,请注明文章来源。
2

发表评论