An Angular method-level cache annotation (decorator)

This article mainly introduces a kind of angular method-level cache annotation (decorator). Now I share it with you and give it as a reference.

You can do a lot of things using decorators in es6. Today I will share a function of using decorators to cache method calls in angular.

The application scenario is like this. In front-end work, there are some frequently used methods that are often called, but each call of these methods takes up a lot of resources, such as network requests, data statistics functions, etc. Generally, the results returned will be different depending on the parameters passed in the function call.

Because I have used the cache function in spring, I feel that it would be great if there were spring cacheable annotations in es. The annotations in spring are used as follows:

@Cacheable(value="'accountCache_'+#userName")// 缓存名叫 accountCache_USERNAME  
public Account getAccountByName(String userName) {  
// @@@@
return acount;  
}

The cache time in spring is configured in the configuration file, but on the front end we generally need to set different cache times for different functions
So we need to specify the corresponding cache time each time

@cacheable(111)
getSecondLeftMenu(topMenuId: number){
return 1111;
}

So I made a cache annotation that supports returning Promise objects

export function cacheable(timeout:number) {
  return function (target: any, key: string, descriptor: any) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args: any[]) {
//把传入的参数和被调的函数名一起组成存储的主键
       const paramStr = args.map(a => JSON.stringify(a)).join();
       const keyStr=key+"start$$"+(paramStr||"")+"-$$end";
       let resultStr=localStorage.getItem(keyStr);
       if (!!resultStr) {
         let resultValue=JSON.parse(resultStr);
          let now=new Date() as any;
//把缓存时的时间和当前的时间进行对比，如果没有超时，则直接返回
          let old2=(new Date(resultValue.date)) as any;
          let delt=now - old2;
          if (delt<(timeout*1000)) {
            return Promise.resolve(resultValue.value);
          }
       }
//超时时，调用原方法，并记录返回结果，这里我们的返回均是promise对象
       var result = originalMethod.apply(this, args);
       result.then(data=>{
        let dd={
          date:new Date(),
          value:data
        }
        localStorage.setItem(keyStr,JSON.stringify(dd))
        return Promise.resolve(data);
       },data=>{
        return Promise.reject(data);
       })
       return result;
     }
     return descriptor;
    }
}

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

How to introduce the icon icon into the Vue project

E-mail address format verification in JavaScript

Introduction to time-sharing functions for javascript performance optimization

##

The above is the detailed content of An Angular method-level cache annotation (decorator). For more information, please follow other related articles on the PHP Chinese website!