江苏龙网

  1. 首页 > 人文 > >

笑看尘世|学习Vue3.0,先来了解一下Proxy( 三 )


handler 里面的方法列表handler里面的方法可以有以下这十三个 ， 每一个都对应的一种或多种针对proxy代理对象的操作行为

  1. handler.get当通过proxy去读取对象里面的属性的时候 ， 会进入到get钩子函数里面
  2. handler.set当通过proxy去为对象设置修改属性的时候 ， 会进入到set钩子函数里面
  3. handler.has当使用in判断属性是否在proxy代理对象里面时 ， 会触发has ， 比如const obj = {name: '子君'}console.log('name' in obj)
  4. handler.deleteProperty当使用delete去删除对象里面的属性的时候 ， 会进入deleteProperty`钩子函数
  5. handler.apply当proxy监听的是一个函数的时候 ， 当调用这个函数时 ， 会进入apply钩子函数
  6. handle.ownKeys当通过Object.getOwnPropertyNames,Object.getownPropertySymbols,Object.keys,Reflect.ownKeys去获取对象的信息的时候 ， 就会进入ownKeys这个钩子函数
  7. handler.construct当使用new操作符的时候 ， 会进入construct这个钩子函数
  8. handler.defineProperty当使用Object.defineProperty去修改属性修饰符的时候 ， 会进入这个钩子函数
  9. handler.getPrototypeOf当读取对象的原型的时候 ， 会进入这个钩子函数
  10. handler.setPrototypeOf当设置对象的原型的时候 ， 会进入这个钩子函数
  11. handler.isExtensible当通过Object.isExtensible去判断对象是否可以添加新的属性的时候 ， 进入这个钩子函数
  12. handler.preventExtensions当通过Object.preventExtensions去设置对象不可以修改新属性时候 ， 进入这个钩子函数
  13. handler.getOwnPropertyDescriptor在获取代理对象某个属性的属性描述时触发该操作 ， 比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时会进入这个钩子函数
Proxy提供了十三种拦截对象操作的方法 ， 本文主要挑选其中一部分在Vue3中比较重要的进行说明 ， 其余的建议可以直接阅读MDN关于Proxy的介绍 。
详细介绍get当通过proxy去读取对象里面的属性的时候 ， 会进入到get钩子函数里面
当我们从一个proxy代理上面读取属性的时候 ， 就会触发get钩子函数 ， get函数的结构如下
/** * target: 目标对象 ， 即通过proxy代理的对象 * key: 要访问的属性名称 * receiver: receiver相当于是我们要读取的属性的this,一般情况 *下他就是proxy对象本身 ， 关于receiver的作用 ， 后文将具体讲解 */handle.get(target,key, receiver)示例我们在工作中经常会有封装axios的需求 ， 在封装过程中 ， 也需要对请求异常进行封装 ， 比如不同的状态码返回的异常信息是不同的 ， 如下是一部分状态码及其提示信息:
// 状态码提示信息const errorMessage = {400: '错误请求',401: '系统未授权 ， 请重新登录',403: '拒绝访问',404: '请求失败 ， 未找到该资源'}// 使用方式const code = 404const message = errorMessage[code]console.log(message)但这存在一个问题 ， 状态码很多 ， 我们不可能每一个状态码都去枚举出来 ， 所以对于一些异常状态码 ， 我们希望可以进行统一提示 ， 如提示为系统异常 ， 请联系管理员 ， 这时候就可以使用Proxy对错误信息进行代理处理
// 状态码提示信息const errorMessage = {400: '错误请求',401: '系统未授权 ， 请重新登录',403: '拒绝访问',404: '请求失败 ， 未找到该资源'}const proxy = new Proxy(errorMessage, {get(target,key) {const value = http://kandian.youth.cn/index/target[key]return value ||'系统异常 ， 请联系管理员'}})// 输出 错误请求console.log(proxy[400])// 输出 系统异常 ， 请联系管理员console.log(proxy[500])


推荐阅读


上一篇：IT世界|教你怎么看当前应用所支持的屏幕刷新率

下一篇：选择遗忘|手机连电脑怎样才用得更爽？它有一个新思路