es6裝飾器異步使用

時(shí)飛發(fā)布于2019-08-26 10:40 / 2190人閱讀

摘要：裝飾器的寫法是在類或類屬性之前，加個(gè)方法名。使用場(chǎng)景突然想到用裝飾器，當(dāng)然是有業(yè)務(wù)需要。但初始化代碼又不歸我控制，且是異步接口請(qǐng)求，不能立即執(zhí)行，這就導(dǎo)致每個(gè)函數(shù)都要調(diào)用一遍這個(gè)方法。

裝飾器簡(jiǎn)介

個(gè)人理解，某些場(chǎng)景需要在不改變?cè)蓄惡蛯傩缘幕A(chǔ)上擴(kuò)展一些功能，所以裝飾器就出現(xiàn)了。

裝飾器的寫法是在類或類屬性之前，加個(gè)方法名。學(xué)過java的同學(xué)應(yīng)該比較熟悉這種寫法，Spring中鋪天蓋地都是注解。具體細(xì)節(jié)到處都是，就不贅述了。

不過截止到今天（2019年8月），遺憾的是nodejs還未原生支持，仍然需要babel編譯。

使用場(chǎng)景

突然想到用裝飾器，當(dāng)然是有業(yè)務(wù)需要。寫了一個(gè)api類，所有暴露的函數(shù)都需要進(jìn)行一步初始化操作。但初始化代碼又不歸我控制，且是異步接口請(qǐng)求，不能立即執(zhí)行，這就導(dǎo)致每個(gè)函數(shù)都要調(diào)用一遍這個(gè)init方法。因?yàn)榧恿司彺妫總€(gè)都要判斷有沒有緩存，比較惡心。

常用例子

一般用這個(gè)日志模塊來舉例，不過它是同步的

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) { //有時(shí)候，arguments指向不對(duì)，可能是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);
})();

在具體函數(shù)前加了裝飾器后，會(huì)先執(zhí)行log方法，這樣緩存的變量就修改了。雖然結(jié)果變成異步的，但也滿足我的需要了。