ace緩存擴充接口_T-HTTP-Cache，接口管理機制，為項目多一種解決方案

何為T-HTTP-Cache？

基于狀态管理，分離出來的一套機制，用于管理接口資料，既能友善閱讀代碼，也可以優化狀态管理，對項目解耦程度更高。

T-HTTP-Cache可以将通過配置項，将符合條件的接口進行攔截，并對接口資料進行緩存，當下一次同樣的接口請求再次發出時攔截判斷，對符合配置項的接口直接傳回緩存資料，不再發出http請求。

擷取緩存資料可以通過送出請求的方式擷取，而不再通路狀态管理中擷取資料

.

目前隻對axios進行了封裝管理，後續會繼續擴充fetch和ajax，具體請關注我，到時候會另行通知。

總的來說，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:https://github.com/onlyheartt9/T-HTTP-Cache 點個star再走吧！！！

後續會發出T-HTTP-Cache源碼解析的文章，希望大家到時候捧場。

關注我，共同進步，升職加薪迎娶白富美不是夢！！！(頭發不要掉，頭發不要掉，頭發不要掉，重要的事情說三遍)