如何快速實(shí)現(xiàn)REST API集成以優(yōu)化業(yè)務(wù)流程
你可能也喜歡這些API文章!
第一行代碼 使用了 es6以上的 Map，如果對(duì)map不是很理解的情況下，你可以參考
ECMAScript 6 入門(mén) Set 和 Map 或者 Exploring ES6 關(guān)于 map 和 set的介紹，此處可以理解為一個(gè)鍵值對(duì)存儲(chǔ)結(jié)構(gòu)。
之后 代碼 使用 了 async 函數(shù)，可以將異步操作變得更為方便。你可以參考ECMAScript 6 入門(mén) async函數(shù)來(lái)進(jìn)行學(xué)習(xí)或者鞏固知識(shí)。
代碼本身很容易理解，是利用 Map 對(duì)象對(duì)數(shù)據(jù)進(jìn)行緩存，之后調(diào)用從 Map 對(duì)象來(lái)取數(shù)據(jù)。對(duì)于及其簡(jiǎn)單的業(yè)務(wù)場(chǎng)景，直接利用此代碼即可。
調(diào)用方式：
getWares().then( ... )
// 第二次調(diào)用 取得先前的data
getWares().then( ... )方案一本身是不足的。因?yàn)槿绻紤]同時(shí)兩個(gè)以上的調(diào)用此 api，會(huì)因?yàn)檎?qǐng)求未返回而進(jìn)行第二次請(qǐng)求api。
當(dāng)然，如果你在系統(tǒng)中添加類(lèi)似于 vuex、redux這樣的單一數(shù)據(jù)源框架，這樣的問(wèn)題不太會(huì)遇到，但是有時(shí)候我們想在各個(gè)復(fù)雜組件分別調(diào)用api，而不想對(duì)組件進(jìn)行組件通信數(shù)據(jù)時(shí)候，便會(huì)遇到此場(chǎng)景。
const promiseCache = new Map()
getWares() {
const key = 'wares'
let promise = promiseCache.get(key);
// 當(dāng)前promise緩存中沒(méi)有 該promise
if (!promise) {
promise = request.get('/getWares').then(res => {
// 對(duì)res 進(jìn)行操作
...
}).catch(error => {
// 在請(qǐng)求回來(lái)后，如果出現(xiàn)問(wèn)題，把promise從cache中刪除 以避免第二次請(qǐng)求繼續(xù)出錯(cuò)S
promiseCache.delete(key)
return Promise.reject(error)
})
}
// 返回promise
return promise
}該代碼避免了方案一的同一時(shí)間多次請(qǐng)求的問(wèn)題。同時(shí)也在后端出錯(cuò)的情況下對(duì)promise進(jìn)行了刪除，不會(huì)出現(xiàn)緩存了錯(cuò)誤的promise就一直出錯(cuò)的問(wèn)題。
調(diào)用方式:
getWares().then( ... )
// 第二次調(diào)用 取得先前的promise
getWares().then( ... )該方案是同時(shí)需要 一個(gè)以上 的api請(qǐng)求的情況下，對(duì)數(shù)據(jù)同時(shí)返回，如果某一個(gè)api發(fā)生錯(cuò)誤的情況下。
均不返回正確數(shù)據(jù)。
const querys ={
wares: 'getWares',
skus: 'getSku'
}
const promiseCache = new Map()
async queryAll(queryApiName) {
// 判斷傳入的數(shù)據(jù)是否是數(shù)組
const queryIsArray = Array.isArray(queryApiName)
// 統(tǒng)一化處理數(shù)據(jù)，無(wú)論是字符串還是數(shù)組均視為數(shù)組
const apis = queryIsArray ? queryApiName : [queryApiName]
// 獲取所有的 請(qǐng)求服務(wù)
const promiseApi = []
apis.forEach(api => {
// 利用promise
let promise = promiseCache.get(api)
if (promise) {
// 如果 緩存中有，直接push
promise.push(promise)
} else {
promise = request.get(querys[api]).then(res => {
// 對(duì)res 進(jìn)行操作
...
}).catch(error => {
// 在請(qǐng)求回來(lái)后，如果出現(xiàn)問(wèn)題，把promise從cache中刪除
promiseCache.delete(api)
return Promise.reject(error)
})
promiseCache.set(api, promise)
promiseCache.push(promise)
}
})
return Promise.all(promiseApi).then(res => {
// 根據(jù)傳入的 是字符串還是數(shù)組來(lái)返回?cái)?shù)據(jù)，因?yàn)楸旧矶际菙?shù)組操作
// 如果傳入的是字符串，則需要取出操作
return queryIsArray ? res : res[0]
})
}該方案是同時(shí)獲取多個(gè)服務(wù)器數(shù)據(jù)的方式。可以同時(shí)獲得多個(gè)數(shù)據(jù)進(jìn)行操作，不會(huì)因?yàn)閱蝹€(gè)數(shù)據(jù)出現(xiàn)問(wèn)題而發(fā)生錯(cuò)誤。
調(diào)用方式：
queryAll('wares').then( ... )
// 第二次調(diào)用 不會(huì)去取 wares，只會(huì)去skus
queryAll(['wares', 'skus']).then( ... )往往緩存是有危害的，如果我們?cè)谥佬薷牧藬?shù)據(jù)的情況下，直接把 cache 刪除即可，此時(shí)我們調(diào)用方法就可以向服務(wù)器進(jìn)行請(qǐng)求。
這樣我們規(guī)避了前端顯示舊的的數(shù)據(jù)。但是我們可能一段時(shí)間沒(méi)有對(duì)數(shù)據(jù)進(jìn)行操作，那么此時(shí)舊的數(shù)據(jù)就一直存在，那么我們最好規(guī)定個(gè)時(shí)間來(lái)去除數(shù)據(jù)。
該方案是采用了 類(lèi) 持久化數(shù)據(jù)來(lái)做數(shù)據(jù)緩存，同時(shí)添加了過(guò)期時(shí)長(zhǎng)數(shù)據(jù)以及參數(shù)化。
代碼如下：
首先定義持久化類(lèi),該類(lèi)可以存儲(chǔ) promise 或者 data
class ItemCache() {
construct(data, timeout) {
this.data = data
// 設(shè)定超時(shí)時(shí)間，設(shè)定為多少秒
this.timeout = timeout
// 創(chuàng)建對(duì)象時(shí)候的時(shí)間，大約設(shè)定為數(shù)據(jù)獲得的時(shí)間
this.cacheTime = (new Date()).getTime
}
}然后我們定義該數(shù)據(jù)緩存。我們采用Map 基本相同的api
class ExpriesCache {
// 定義靜態(tài)數(shù)據(jù)map來(lái)作為緩存池
static cacheMap = new Map()
// 數(shù)據(jù)是否超時(shí)
static isOverTime(name) {
const data = ExpriesCache.cacheMap.get(name)
// 沒(méi)有數(shù)據(jù) 一定超時(shí)
if (!data) return true
// 獲取系統(tǒng)當(dāng)前時(shí)間戳
const currentTime = (new Date()).getTime()
// 獲取當(dāng)前時(shí)間與存儲(chǔ)時(shí)間的過(guò)去的秒數(shù)
const overTime = (currentTime - data.cacheTime) / 1000
// 如果過(guò)去的秒數(shù)大于當(dāng)前的超時(shí)時(shí)間，也返回null讓其去服務(wù)端取數(shù)據(jù)
if (Math.abs(overTime) > data.timeout) {
// 此代碼可以沒(méi)有，不會(huì)出現(xiàn)問(wèn)題，但是如果有此代碼，再次進(jìn)入該方法就可以減少判斷。
ExpriesCache.cacheMap.delete(name)
return true
}
// 不超時(shí)
return false
}
// 當(dāng)前data在 cache 中是否超時(shí)
static has(name) {
return !ExpriesCache.isOverTime(name)
}
// 刪除 cache 中的 data
static delete(name) {
return ExpriesCache.cacheMap.delete(name)
}
// 獲取
static get(name) {
const isDataOverTiem = ExpriesCache.isOverTime(name)
//如果 數(shù)據(jù)超時(shí)，返回null，但是沒(méi)有超時(shí)，返回?cái)?shù)據(jù)，而不是 ItemCache 對(duì)象
return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data
}
// 默認(rèn)存儲(chǔ)20分鐘
static set(name, data, timeout = 1200) {
// 設(shè)置 itemCache
const itemCache = mew ItemCache(data, timeout)
//緩存
ExpriesCache.cacheMap.set(name, itemCache)
}
}此時(shí)數(shù)據(jù)類(lèi)以及操作類(lèi) 都已經(jīng)定義好,我們可以在api層這樣定義
// 生成key值錯(cuò)誤
const generateKeyError = new Error("Can't generate key from name and argument")
// 生成key值
function generateKey(name, argument) {
// 從arguments 中取得數(shù)據(jù)然后變?yōu)閿?shù)組
const params = Array.from(argument).join(',')
try{
// 返回 字符串，函數(shù)名 + 函數(shù)參數(shù)
return ${name}:${params}
}catch(_) {
// 返回生成key錯(cuò)誤
return generateKeyError
}
}
async getWare(params1, params2) {
// 生成key
const key = generateKey('getWare', [params1, params2])
// 獲得數(shù)據(jù)
let data = ExpriesCache.get(key)
if (!data) {
const res = await request('/getWares', {params1, params2})
// 使用 10s 緩存，10s之后再次get就會(huì) 獲取null 而從服務(wù)端繼續(xù)請(qǐng)求
ExpriesCache.set(key, res, 10)
}
return data
}該方案使用了 過(guò)期時(shí)間 和 api 參數(shù)不同而進(jìn)行 緩存的方式。已經(jīng)可以滿足絕大部分的業(yè)務(wù)場(chǎng)景。
調(diào)用方式：
getWares(1,2).then( ... )
// 第二次調(diào)用 取得先前的promise
getWares(1,2).then( ... )
// 不同的參數(shù)，不取先前promise
getWares(1,3).then( ... )和方案四是的解法一致的，但是是基于修飾器來(lái)做。
代碼如下：
// 生成key值錯(cuò)誤
const generateKeyError = new Error("Can't generate key from name and argument")
// 生成key值
function generateKey(name, argument) {
// 從arguments 中取得數(shù)據(jù)然后變?yōu)閿?shù)組
const params = Array.from(argument).join(',')
try{
// 返回 字符串
return ${name}:${params}
}catch(_) {
return generateKeyError
}
}
function decorate(handleDescription, entryArgs) {
// 判斷 當(dāng)前 最后數(shù)據(jù)是否是descriptor，如果是descriptor,直接 使用
// 例如 log 這樣的修飾器
if (isDescriptor(entryArgs[entryArgs.length - 1])) {
return handleDescription(...entryArgs, [])
} else {
// 如果不是
// 例如 add(1) plus(20) 這樣的修飾器
return function() {
return handleDescription(...Array.protptype.slice.call(arguments), entryArgs)
}
}
}
function handleApiCache(target, name, descriptor, ...config) {
// 拿到函數(shù)體并保存
const fn = descriptor.value
// 修改函數(shù)體
descriptor.value = function () {
const key = generateKey(name, arguments)
// key無(wú)法生成，直接請(qǐng)求 服務(wù)端數(shù)據(jù)
if (key === generateKeyError) {
// 利用剛才保存的函數(shù)體進(jìn)行請(qǐng)求
return fn.apply(null, arguments)
}
let promise = ExpriesCache.get(key)
if (!promise) {
// 設(shè)定promise
promise = fn.apply(null, arguments).catch(error => {
// 在請(qǐng)求回來(lái)后，如果出現(xiàn)問(wèn)題，把promise從cache中刪除
ExpriesCache.delete(key)
// 返回錯(cuò)誤
return Promise.reject(error)
})
// 使用 10s 緩存，10s之后再次get就會(huì) 獲取null 而從服務(wù)端繼續(xù)請(qǐng)求
ExpriesCache.set(key, promise, config[0])
}
return promise
}
return descriptor;
}
// 制定 修飾器
function ApiCache(...args) {
return decorate(handleApiCache, args)
}此時(shí) 我們就會(huì)使用 類(lèi)來(lái)對(duì)api進(jìn)行緩存
class Api {
// 緩存10s
@ApiCache(10)
// 此時(shí)不要使用默認(rèn)值，因?yàn)楫?dāng)前 修飾器 取不到
getWare(params1, params2) {
return request.get('/getWares')
}
}因?yàn)楹瘮?shù)存在函數(shù)提升，所以沒(méi)有辦法利用函數(shù)來(lái)做 修飾器?
例如:
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}該代碼意圖是執(zhí)行后counter等于 1，但是實(shí)際上結(jié)果是counter等于 0。因?yàn)楹瘮?shù)提升，使得實(shí)際執(zhí)行的代碼是下面這樣
@add
function foo() {
}
var counter;
var add;
counter = 0;
add = function () {
counter++;
};所以沒(méi)有 辦法在函數(shù)上用修飾器。具體參考ECMAScript 6 入門(mén) Decorator
此方式寫(xiě)法簡(jiǎn)單且對(duì)業(yè)務(wù)層沒(méi)有太多影響。但是不可以動(dòng)態(tài)修改 緩存時(shí)間
調(diào)用方式
getWares(1,2).then( ... )
// 第二次調(diào)用 取得先前的promise
getWares(1,2).then( ... )
// 不同的參數(shù)，不取先前promise
getWares(1,3).then( ... )api的緩存機(jī)制與場(chǎng)景在這里也基本上介紹了，基本上能夠完成絕大多數(shù)的數(shù)據(jù)業(yè)務(wù)緩存，在這里我也想請(qǐng)教教大家，有沒(méi)有什么更好的解決方案，或者這篇博客中有什么不對(duì)的地方，歡迎指正，在這里感謝各位了。?
同時(shí)這里也有很多沒(méi)有做完的工作，可能會(huì)在后面的博客中繼續(xù)完善。
文章轉(zhuǎn)自微信公眾號(hào)@前端技術(shù)精選
對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力
一鍵對(duì)比試用API 限時(shí)免費(fèi)
安全的關(guān)鍵.png)
