T-HTTP-Cache，接口数据管理方案，为项目多一种解决方案

无形就是我
992 阅读9分钟

何为T-HTTP-Cache？

将不可变接口数据（接口数据获取后不会发生改变，直到下次发出请求）从状态管理中分离，用于管理接口数据，既能方便阅读代码，也可以优化状态管理，对项目解耦程度更高。

T-HTTP-Cache可以将通过配置项，将符合条件的接口进行拦截，并对接口数据进行缓存，当下一次同样的接口请求再次发出时拦截判断，对符合配置项的接口直接返回缓存数据，不再发出http请求。获取缓存数据可以通过发出请求的方式获取，而不再访问状态管理中获取数据.

发出请求获取数据，可以理解为一种key-value的形式，以接口+参数+请求方式为key，获取数据为value，T-HTTP-Cache就是基于这样，将数据进行存储。

目前只对axios进行了封装管理，后续会继续扩展fetch和ajax，具体请关注我，到时候会另行通知。

总的来说，T-HTTP-Cache可以通过配置，实现节流防抖，数据缓存的功能，下面给大家具体讲解一下。

T-HTTP-Cache于useRequest区别以及T-HTTP-Cache的优点

T-HTTP-Cache侧重于数据缓存，接口数据与状态管理脱离。useRequest用于管理异步数据请求.个人角度上看，可视化数据管理在状态管理中本来就是不可取的，对于状态管理很不友好，项目中更多的接口数据为可视化数据（不可修改数据），将一个数据结构很大的数据存储与状态管理的一个状态中，其数据会整体改变，不会单独改变，就会感觉很怪异。在阅读代码时，看状态管理中的属性，还需要区分哪些是状态值，哪些为接口可视化数据，当然也会有一些接口数据是状态，但更多的则不是。

其次，T-HTTP-Cache学习成本很低，只是会对请求的发起者（axios，ajax，fetch等）进行包装，用户直接使用即可，对于组件的解耦，阅读代码有很大的帮助，数据来源全部使用接口的方式，对数据来源一目了然，减少更多的判断，对于没有缓存的接口将直接发出请求，有缓存的接口直接返回缓存数据。

T-HTTP-Cache可以运行在所有前端项目中，vue，react，html，useRequest(确实效果更加强大)则只是在react中。

接口是由后台人员开发，所有的接口基本上都是以数据类型划分的，比如用户信息相关接口，配置项相关接口，同样T-HTTP-Cache也是按照接口为模块进行数据管理，配置对应的配置项，用户管理，比如A接口在A组件中使用，也在B组件中使用，既然数据是一致的，甚至于参数也是一致的，那么为什么不按照接口为模块进行管理，可能会有人想，可能A,B组件两个地方数据效果不一样，那么这就证明了后台人员的失败，例如用户信息的接口数据里，不应该包含项目配置信息的数据。做到数据与接口关联，而并非数据与功能模块关联。

总结一下，T-HTTP-Cache的优点就是接口数据与状态管理分离,批量配置，运行环境广，使用后对项目解耦度高（除非接口频繁改变），上手难度低，后续如果有合适的功能也会扩展，具体看大家们的评论了。

T-HTTP-Cache使用教程

事先说明

该插件不会影响项目和接口的使用(配置错误不关我事哦),可以直接在现有项目上直接使用，所以使用时一定要仔细配置，

1.安装和Demo

首先安装T-HTTP-Cache，使用命令: npm i T-HTTP-Cache,然后按照下列代码一样，

import THCache,{TBindAxios} from "t-http-cache";
let thc = new THCache();
axios = TBindAxios(axios);//axios为自己引入的对象，THCache只是做封装处理，全局只执行一次即可，后续axios使用返回的axios对象
let optKey = thc.setOption({
       url:"",
       type:"fuzzy",
       method:"all",
       keepTime:0
});
axios({
       method:"GET",
       url:"http://jsonplaceholder.typicode.com/users",
       data:{
           firstName: 'Fred',
           lastName: 'Flintstone
       }
}).then(res=>{
    console.log(res._cacheKey)
});

这样就完成了。

2.TBindAxios

TBindAxios是将axios进行封装的一个方法，这样程序员们在调用axios发出请求时，THCache会自动拦截，提示，如果不进行绑定，不影响程序正常运行，只是

插件的功能将不会生效。

封装axios的同同时会添加一个requestFilter和responseFilter，不用影响用户自己配置的filter,THCache的requestFilter和responseFilter会最后执行。

3.THCache重点：option配置项

//OPTION参数模板
{
  url: "/aaa",//需要拦截处理的路径
  type: "precise" || "fuzzy",//拦截请求的模式，是精准匹配还是模糊匹配，默认precise
  keepTime: 3000 || "forever"||"trigger"||-1,//缓存时效配置，分为有限，无限和触发三种模式，默认3000
  local: "defalut" || "storage",//缓存存储位置配置，可以存在闭包内或localStorage中
  excludes: ["/aaa/bbb"],//模糊匹配时使用，对指定url不再拦截处理
  excludeAttrs:["name"]||"all",//对拦截到的请求，相关参数不做匹配处理
  method: "get"||"all"//请求格式配置项，all为所有格式
  dataFormat:(data)=>data //数据预处理方法，对返回值进行处理
}

3.1 option.url&option.type&option.method

url,type,method这三个参数这里一起讲解，是因为它们是作为匹配项进行配置的，因为对接口添加了过滤，所以，每次请求插件都会拦截，根据请求的url,method和option里的url,method进行对比，匹配成功，该接口则使用对应匹配的配置项，后续操作也回按照匹配的配置项里的其他配置生效。

option.url

请求路径需要和option.type配合

option.type

"precise" || "fuzzy"，两个值可配置，表示是否使用精准匹配还是模糊匹配，如果url配置为 /aaa,使用 precise，则该配置项只会匹配/aaa的接口，

使用 fuzzy,则会匹配以/aaa开头的接口，例如/aaa/bbb或/aaa/ccc，同时不会匹配/aaa的接口

option.method

可以配置为 all，表示所有请求类型都可以，之后会举例子介绍all的用法。

3.2 option.keepTime

option.keepTime有4种模式，有限，无限，触发，和不缓存4种模式，下面举例子

keepTime: 3000 有限，缓存数据时效为3秒

keepTime: 'forever' 无限，缓存数据时效为永久(只要页面不关闭)

keepTime: 'trigger' 触发，缓存数据时效为永久，但是可以通过其他配置去重新请求，更新数据

keepTime: -1 不缓存 接口数据不做缓存，但可以享用防抖功能

3.3 option.local

缓存存储位置，defalut 为插件内， storage为localStorage中，storage建议谨慎使用

3.4 option.excludes&option.excludeAttrs

option.excludes

在option.type 为 fuzzy时生效，可以配置不想要处理的接口，例如/aaa/bbb,/aaa/ccc,不想匹配/aaa/ccc，就可以在option.excludes中配置['/aaa/ccc']

option.excludeAttrs

同样，当某个接口，不需要对参数进行对比。可以使用该配置，如果所有参数都不想对比，则配置为 all

3.5 option.dataFormat

对接口数据缓存前的处理，可以用于数据结构之类

3.6 option.keepTime = "trigger"

这个需要着重讲解，上面也说了，trgger模式下，对应接口数据缓存时效为永久，但是可以通过配置使接口执行，更新缓存，下面讲解如何配置，

在发出的请求参数中加入_trigger:true即可。

THCache API

api不是很多，简单说明一下

THCache.prototype.setOptions （option[]）=> optKey[]

设置配置项，返回对应的optKey

THCache.prototype.setOption （option） => optKey

设置单个配置项，返回对应的optKey

THCache.prototype.getOptionByKey (optKey)=> option

根据optKey获取配置项

THCache.prototype.removeOptionByKey (optKey)=> void

删除配置项根据optKey

THCache.prototype.getCacheByKey (cacheKey)=> object

获取接口缓存根据cacheKey，cacheKey是在第一次返回数据的时候，返回数据中会有一个_cacheKey字段

THCache.prototype.setDebugger

设置debugger模式，在发出请求时，打印接口对应的option，方便调试

拦截规则

如何拦截

对axios重新封装，添加requestFilter进行拦截

匹配规则

源码内会将请求的url(路径)，method(请求类型),params(参数)等进行编码作为key值存储在TCache(hash格式的数据类型)中，所以，每次请求，会先匹配是否由对应的option，然后会在对应option的缓存模块中，查找是否有对应的缓存，所以，只要同接口，不同参数，对应的缓存是不一样的，如果想要一样，可以配置excludeAttrs属性。

关于TCache，后续会出帖子来介绍。

实战案例

上面介绍了THCache的api和配置项，那么，接下来出几种项目中用到的情况，以及解决方案

1.全局接口防抖配置

所有接口在pendding时，不会再次发出请求 ,不会缓存，url配置为'/',只会对当前项目的接口进行拦截，配置为空字符串可以对第三方的接口也做拦截

let option = {
    url:"",
    type:"fuzzy",
    method:"all",
    keepTime:"-1"
}

2.多组件使用同一接口数据，并由一个组件更新数据

例如条件查询的表格数据，其他组件也要使用同数据，但是其他组件创建的时间不确定，如果表格数据不重新查询，则一直使用同份数据

let option = {
    url:"/xxx",//根据情况自行配置
    type:"precise",//根据情况自行配置
    method:"all",//根据情况自行配置
    keepTime:"trigger",
    excludeAttrs:"all"
}

3.字典项数据配置

比如选项，地址之类等配置在后台数据库中存储，使用时需要请求获取，那么可以只请求一次，之后调用接口获取缓存

let option = {
    url:"/xxx",//根据情况自行配置
    type:"precise",
    method:"all",//根据情况自行配置
    keepTime:"forever",
}

4.用户信息或项目配置数据

可以设置到localStorage中,可以对数据进行重构

let option = {
    url:"/xxx",//根据情况自行配置
    type:"precise",//根据情况自行配置
    method:"all",//根据情况自行配置
    keepTime:"forever",
    local:"storage",
    dataFormat:(res)=>res,
    excludeAttrs:"all"
}

5.不需要频繁更新的数据

可以理解为节流，短时间内同接口同参数不发出请求，比如查询，不希望短时间频繁查询等。

let option = {
    url:"/xxx",//根据情况自行配置
    type:"precise",//根据情况自行配置
    method:"all",//根据情况自行配置
    keepTime:3000,
}

等等，以上只是局部的例子，更多的使用可以根据不同的场景设置不同的配置。

总结

以上就是对T-HTTP-Cache的内容了，希望大家喜欢，去github:github.com/onlyheartt9… 点个star再走吧！！！

后续会发出T-HTTP-Cache源码解析的帖子，希望大家到时候捧场。

关注我，共同进步，升职加薪迎娶白富美不是梦！！！(头发不要掉，头发不要掉，头发不要掉，重要的事情说三遍)

avatar
文章
阅读
粉丝