es6装饰器异步使用

时飞发布于2019-08-26 10:40 / 2009人阅读

摘要：装饰器的写法是在类或类属性之前，加个方法名。使用场景突然想到用装饰器，当然是有业务需要。但初始化代码又不归我控制，且是异步接口请求，不能立即执行，这就导致每个函数都要调用一遍这个方法。

装饰器简介

个人理解，某些场景需要在不改变原有类和属性的基础上扩展一些功能，所以装饰器就出现了。

装饰器的写法是在类或类属性之前，加个方法名。学过java的同学应该比较熟悉这种写法，Spring中铺天盖地都是注解。具体细节到处都是，就不赘述了。

不过截止到今天（2019年8月），遗憾的是nodejs还未原生支持，仍然需要babel编译。

使用场景

突然想到用装饰器，当然是有业务需要。写了一个api类，所有暴露的函数都需要进行一步初始化操作。但初始化代码又不归我控制，且是异步接口请求，不能立即执行，这就导致每个函数都要调用一遍这个init方法。因为加了缓存，每个都要判断有没有缓存，比较恶心。

常用例子

一般用这个日志模块来举例，不过它是同步的

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
math.add(2, 4);

修改为异步

let init = 0;
class Maths {
  @log
  add (a, b) {
    return a + b + init;
  }
}

function log (target, name, descriptor) {
  let oldValue = descriptor.value;
  descriptor.value = function (...args) { //有时候，arguments指向不对，可能是babel的锅？
    console.log(`Calling "${name}" with`, args);
    return new Promise((resolve) => {
      setTimeout(function () {
        // args = [...args, 100];
        init = 100;
        resolve(oldValue.apply(target, args)); //this指向
      }, 100);
    });
  };
  return descriptor;
}

const math = new Maths();

(async () => {
  let a = await math.add(2, 4);
  console.log(a);
})();

在具体函数前加了装饰器后，会先执行log方法，这样缓存的变量就修改了。虽然结果变成异步的，但也满足我的需要了。

GPU服务器私有云装饰器装饰器模式多个装饰器多重装饰器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106570.html

新上课程推荐：TypeScript完全解读(总26课时）

摘要：本套课程包含两大部分，第一部分是基础部分，也是重要部分，参考官方文档结构，针对内容之间的关联性和前后顺序进行合理调整。 showImg(https://segmentfault.com/img/bVbpBA0?w=1460&h=400); 讲师简介： iview 核心开发者，iview-admin 作者，百万级虚拟渲染表格组件 vue-bigdata-table 作者。目前就职于知名互...

caozhijian 2019-08-26 13:35 评论0 收藏0
ES6 系列之我们来聊聊装饰器

摘要：第二部分源码解析接下是应用多个第二部分对于一个方法应用了多个，比如会编译为在第二部分的源码中，执行了和操作，由此我们也可以发现，如果同一个方法有多个装饰器，会由内向外执行。有了装饰器，就可以改写上面的代码。 Decorator 装饰器主要用于: 装饰类装饰方法或属性装饰类 @annotation class MyClass { } function annotation(ta...

eternalshallow 2019-08-23 13:13 评论0 收藏0
JS 装饰器，一篇就够

摘要：的装饰器中的同样借鉴了这个语法糖，不过依赖于的方法。等同于也就是说，装饰器是一个对类进行处理的函数。别名或装饰器在控制台显示一条警告，表示该方法将废除。有了装饰器，就可以改写上面的代码。更多文章，请在Github blog查看在 ES6 中增加了对类对象的相关定义和操作（比如 class 和 extends ），这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候，变得并...

learning 2019-08-22 16:31 评论0 收藏0
从ES6重新认识JavaScript设计模式: 装饰器模式

摘要：什么是装饰器模式向一个现有的对象添加新的功能，同时又不改变其结构的设计模式被称为装饰器模式，它是作为现有的类的一个包装。中的装饰器模式中有一个的提案，使用一个以开头的函数对中的及其属性方法进行修饰。 1 什么是装饰器模式 showImg(https://segmentfault.com/img/remote/1460000015970102?w=1127&h=563); 向一个现有的对...

wendux 2019-08-23 10:56 评论0 收藏0