一种angular的方法级的缓存注解（装饰器）

使用es6中装装饰器能做很多事情，今天分享一种在angular使用装饰器进行方法调用缓存的功能。

应用场景是这样的，在前端工作中，会有一些经常使用的方法经常被调用，但是这些方法每次调用都会占用很多的资源，比如网络请求，数据统计功能，这些方法一般会随着函数调用传参的不同返回的结果不同。

因为使用过spring中的cache功能，感觉es中如果有spring cacheable注解就好了，在spring中注解使用如下：

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

spring中的缓存时间是在配置文件中配置的，但是在前端一般我们需要针对不同的函数设置不同的缓存时间
因此 需要每次指定相应的缓存时间

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

于是我搞了一个支持 返回是Promise对象的缓存注解

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;
    }
}

上述的代码中，我们重点实现了返回值是Promise对象的函数，因为在前端工作中，最占用资源和需要缓存的是网络请求，而且也极易影响用户的体验，因此我们重点关心了返回值是Promise的注解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 关于angularJs清除浏览器缓存的方法
  • AngularJs 禁止模板缓存的方法
  • Angularjs在360兼容模式下取数据缓存问题的解决办法
  • AngularJS中的缓存使用
  • 使用Angular缓存父页面数据的方法
  • 详解Angular中$cacheFactory缓存的使用
  • AngularJS在IE下取数据总是缓存问题的解决方法
  • 详解AngularJS中$http缓存以及处理多个$http请求的方法
  • AngularJS实现Model缓存的方式
赞 (0)

相关推荐

  • AngularJS实现Model缓存的方式

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope的某个变量. 有的直接把对象赋值给Scope变量:有的在Provider中返回一个对象再赋值给Scope变量:有的在Provider中返回一个构造函数再赋值给Scope变量.本篇来一一体验. 首先自定义一个directive,用来点击按钮改变一个scope变量值. angular .module('

  • 关于angularJs清除浏览器缓存的方法

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的. 以下是传统的清除浏览器的方法 meta方法

  • Angularjs在360兼容模式下取数据缓存问题的解决办法

    测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重装之后,终于打开了开发者工具,经过跟踪发现,第一次删除数据时可以正常刷新,第二次或以后的删除将无法刷新,跟踪代码,发现通过异步请求的数据正常的返回并且绑定了.点击搜索按钮,也无法实现刷新,但是点击分页,发现可以翻页.初步推断是浏览器缓存了异步请求数据,跟踪比较返回的数据发现,推断是正确的.于是从网上

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • AngularJS中的缓存使用

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory与缓存对象 $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量.举个生动

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • 使用Angular缓存父页面数据的方法

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置.再做的过程当中查过 许多资料,都说的不很详细,今天把方法记录下来,供参考. 要想缓存,要用到嵌套路由(ui-router):    有三个嵌套的方法: 使用"点标记法",例如:.state('contacts

  • AngularJs 禁止模板缓存的方法

    本文介绍了AngularJs 禁止模板缓存的方法,分享给大家,也给自己留个笔记,具有如下: 因为AngularJs的特性(or 浏览器本身的缓存?),angular默认的HTML模板加载都会被缓存起来.导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板,自己测试还好,但如果更新了服务器的模板内容,用户可不会每个都配合你去清除浏览器的缓存.故这还真是个大问题. app.config(function($routeProvider, $locationProvid

  • AngularJS在IE下取数据总是缓存问题的解决方法

    本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法.分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJS的配置中通过$httpProvider来设置其不缓存.具体如下所示: ngApp.config(function ($httpProvider) { // Initialize get if no

  • 一种angular的方法级的缓存注解（装饰器）

    使用es6中装装饰器能做很多事情,今天分享一种在angular使用装饰器进行方法调用缓存的功能. 应用场景是这样的,在前端工作中,会有一些经常使用的方法经常被调用,但是这些方法每次调用都会占用很多的资源,比如网络请求,数据统计功能,这些方法一般会随着函数调用传参的不同返回的结果不同. 因为使用过spring中的cache功能,感觉es中如果有spring cacheable注解就好了,在spring中注解使用如下: @Cacheable(value="'accountCache_'+#userN

  • springmvc用于方法鉴权的注解拦截器的解决方案代码

    springmvc用于方法鉴权的注解拦截器的解决方案代码

    最近在用SpringMvc写项目的时候,遇到一个问题,就是方法的鉴权问题,这个问题弄了一天了终于解决了,下面看下解决方法 项目需求:需要鉴权的地方,我只需要打个标签即可,比如只有用户登录才可以进行的操作,一般情况下我们会在执行方法时先对用户的身份进项校验,这样无形中增加了非常大的工作量,重复造轮子,有了java注解只需要在需要鉴权的方法上面打个标签即可: 解决方案: 1.首先创建一个注解类: @Documented @Inherited @Target({ElementType.METHOD,E

  • Python装饰器使用方法全面梳理

    目录 1 装饰器背景知识 1.1 基本概念 1.2 应用场景 2 简单的装饰器代码 3 使用装饰器记录函数执行次数 4 带参数的装饰器 5 装饰器处理有返回值的函数 1 装饰器背景知识 1.1 基本概念 装饰器(Decorator)是 Python 中一种函数或类,用来修饰其他函数或类.装饰器可以改变被装饰函数的行为,或者在调用被装饰函数之前和之后增加额外的操作.装饰器的语法是使用 @ 语法符,在函数定义之前增加装饰器函数的名称. @decorator_func def my_func(): p

  • Angular 4依赖注入学习教程之Injectable装饰器（六）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • 12步入门Python中的decorator装饰器使用方法

    装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一个函数的返回结果.相对于其它方式,装饰器语法简单,代码可读性高.因此,装饰器在Python项目中有广泛的应用. 装饰器最早在Python 2.5中出现,它最初被用于加工函数和方法这样的可调用对象(callable object,这样的对象定义有call方法).在Python 2.6以及之后的Pyth

  • 基于spring 方法级缓存的多种实现

    方案实施 1. spring和ehcache集成 主要获取ehcache作为操作ehcache的对象. spring.xml中注入ehcacheManager和ehCache对象,ehcacheManager是需要加载ehcache.xml配置信息,创建ehcache.xml中配置不同策略的cache. <!-- ehCache 配置管理器 --> <bean id="ehcacheManager" class="org.springframework.ca

  • Vue中四种操作dom方法保姆级讲解

    目录 前言 一.通过ref拿到dom的引用 适用场景 示例代码 二.通过父容器的ref遍历拿到dom引用 适用场景 示例代码 三.通过子组件emit传递ref 适用场景 示例代码 四.通过:ref将dom引用放到数组中 适用场景 示例代码 前言 最近主管提出了许多优化用户体验的要求,其中很多涉及 dom 操作.本文将 Vue3 中常见的 dom 操作总结了一下. 一.通过ref拿到dom的引用 <template> <div class="ref-container"

  • Angular在模板驱动表单中自定义校验器的方法

    引言 模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦. 所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法. 表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required.min.max.pattern 等,这些原本是HTML DOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required 对应 RequiredValidator. 然后很多时候我们需要一些特殊的

  • C#基于Modbus三种CRC16校验方法的性能对比

    1.背景介绍 主要应用场景在物联网中,底端设备注册报文的上报,需要对报文的有效载荷(data)进行CRC16的复验,验证与设备端的CRC校验是否相等,如果相等,报文有效,设备上报就会注册成功,不是第一次则会刷新心跳时间,避免通信中断告警.设备的报文结果以及设备的CRC16位置如下: 平台端需要重新对注册包内容(不包含设备的CRC计算字节)进行CRC校验计算,与设备端的CRC校验对比.如果相等,则平台端的CRC校验成功. 备注:本文的CRC校验全部指CRC16的校验. 2. CRC校验的三种方法

  • angular.extend方法的具体使用

    angular.extend方法的具体使用

    AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性,如下图所示. angular.extends()方法的第一个参数是要被扩展的对象,后面可以传入一个或多个对象. 如果想要保存一个对象的状态,除了可以调用angular.copy()方法外,还可以把一个空对象{}作为第一个对象传入. 但要注意的是,angular.extends()是非递归的,也就是说:如果扩展的属性中有对象,那么二者同时引用同一

随机推荐