前端api請求緩存的方法是什么

這篇文章主要介紹“前端api請求緩存的方法是什么”，在日常操作中，相信很多人在前端api請求緩存的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”前端api請求緩存的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司主營尼木網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,尼木h5小程序開發(fā)搭建,尼木網(wǎng)站營銷推廣歡迎尼木等地區(qū)企業(yè)咨詢

方案一、數(shù)據(jù)緩存

簡單的數(shù)據(jù) 緩存，第一次請求時候獲取數(shù)據(jù)，之后便使用數(shù)據(jù)，不再請求后端api。

代碼如下：

const dataCache = new Map()  async getWares() {      let key = 'wares'      // 從data 緩存中獲取 數(shù)據(jù)      let data = dataCache.get(key)      if (!data) {          // 沒有數(shù)據(jù)請求服務(wù)器          const res = await request.get('/getWares')          // 其他操作          ...          data = ...          // 設(shè)置數(shù)據(jù)緩存          dataCache.set(key, data)      }      return data  }

第一行代碼使用了 es6以上的 Map，如果對map不是很理解的情況下，你可以參考

ECMAScript 6 入門 Set 和 Map 或者 Exploring ES6 關(guān)于 map 和 set的介紹，此處可以理解為一個鍵值對存儲結(jié)構(gòu)。

之后代碼使用了 async 函數(shù)，可以將異步操作變得更為方便。你可以參考ECMAScript 6 入門 async函數(shù)來進(jìn)行學(xué)習(xí)或者鞏固知識。

代碼本身很容易理解，是利用 Map 對象對數(shù)據(jù)進(jìn)行緩存，之后調(diào)用從 Map 對象來取數(shù)據(jù)。對于及其簡單的業(yè)務(wù)場景，直接利用此代碼即可。

調(diào)用方式：

getWares().then( ... )  // 第二次調(diào)用 取得先前的data  getWares().then( ... )

方案二、 promise緩存

方案一本身是不足的。因為如果考慮同時兩個以上的調(diào)用此 api，會因為請求未返回而進(jìn)行第二次請求api。

當(dāng)然，如果你在系統(tǒng)中添加類似于 vuex、redux這樣的單一數(shù)據(jù)源框架，這樣的問題不太會遇到，但是有時候我們想在各個復(fù)雜組件分別調(diào)用api，而不想對組件進(jìn)行組件通信數(shù)據(jù)時候，便會遇到此場景。

const promiseCache = new Map()  getWares() {      const key = 'wares'      let promise = promiseCache.get(key);      // 當(dāng)前promise緩存中沒有 該promise      if (!promise) {          promise = request.get('/getWares').then(res => {              // 對res 進(jìn)行操作              ...          }).catch(error => {              // 在請求回來后，如果出現(xiàn)問題，把promise從cache中刪除 以避免第二次請求繼續(xù)出錯S              promiseCache.delete(key)              return Promise.reject(error)          })      }      // 返回promise      return promise  }

該代碼避免了方案一的同一時間多次請求的問題。同時也在后端出錯的情況下對promise進(jìn)行了刪除，不會出現(xiàn)緩存了錯誤的promise就一直出錯的問題。

調(diào)用方式:

getWares().then( ... )  // 第二次調(diào)用 取得先前的promise  getWares().then( ... )

方案三、多promise 緩存

該方案是同時需要一個以上的api請求的情況下，對數(shù)據(jù)同時返回，如果某一個api發(fā)生錯誤的情況下。

均不返回正確數(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ù)，無論是字符串還是數(shù)組均視為數(shù)組      const apis = queryIsArray ? queryApiName : [queryApiName]      // 獲取所有的 請求服務(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 => {                  // 對res 進(jìn)行操作                  ...                  }).catch(error => {                  // 在請求回來后，如果出現(xià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ù)組來返回數(shù)據(jù)，因為本身都是數(shù)組操作          // 如果傳入的是字符串，則需要取出操作          return queryIsArray ? res : res[0]      })  }

該方案是同時獲取多個服務(wù)器數(shù)據(jù)的方式?？梢酝瑫r獲得多個數(shù)據(jù)進(jìn)行操作，不會因為單個數(shù)據(jù)出現(xiàn)問題而發(fā)生錯誤。

調(diào)用方式：

queryAll('wares').then( ... )  // 第二次調(diào)用 不會去取 wares，只會去skus  queryAll(['wares', 'skus']).then( ... )

方案四、添加時間有關(guān)的緩存

往往緩存是有危害的，如果我們在知道修改了數(shù)據(jù)的情況下，直接把 cache 刪除即可，此時我們調(diào)用方法就可以向服務(wù)器進(jìn)行請求。

這樣我們規(guī)避了前端顯示舊的的數(shù)據(jù)。但是我們可能一段時間沒有對數(shù)據(jù)進(jìn)行操作，那么此時舊的數(shù)據(jù)就一直存在，那么我們最好規(guī)定個時間來去除數(shù)據(jù)。

該方案是采用了類持久化數(shù)據(jù)來做數(shù)據(jù)緩存，同時添加了過期時長數(shù)據(jù)以及參數(shù)化。

代碼如下：

首先定義持久化類,該類可以存儲 promise 或者 data

class ItemCache() {      construct(data, timeout) {          this.data = data          // 設(shè)定超時時間，設(shè)定為多少秒          this.timeout = timeout          // 創(chuàng)建對象時候的時間，大約設(shè)定為數(shù)據(jù)獲得的時間          this.cacheTime = (new Date()).getTime      }  }

然后我們定義該數(shù)據(jù)緩存。我們采用Map 基本相同的api

class ExpriesCache {      // 定義靜態(tài)數(shù)據(jù)map來作為緩存池      static cacheMap =  new Map()      // 數(shù)據(jù)是否超時      static isOverTime(name) {          const data = ExpriesCache.cacheMap.get(name)          // 沒有數(shù)據(jù) 一定超時          if (!data) return true          // 獲取系統(tǒng)當(dāng)前時間戳          const currentTime = (new Date()).getTime()              // 獲取當(dāng)前時間與存儲時間的過去的秒數(shù)          const overTime = (currentTime - data.cacheTime) / 1000          // 如果過去的秒數(shù)大于當(dāng)前的超時時間，也返回null讓其去服務(wù)端取數(shù)據(jù)          if (Math.abs(overTime) > data.timeout) {              // 此代碼可以沒有，不會出現(xiàn)問題，但是如果有此代碼，再次進(jìn)入該方法就可以減少判斷。              ExpriesCache.cacheMap.delete(name)              return true          }          // 不超時          return false     }      // 當(dāng)前data在 cache 中是否超時      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ù)超時，返回null，但是沒有超時，返回數(shù)據(jù)，而不是 ItemCache 對象          return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data      }      // 默認(rèn)存儲20分鐘      static set(name, data, timeout = 1200) {          // 設(shè)置 itemCache          const itemCache = mew ItemCache(data, timeout)          //緩存          ExpriesCache.cacheMap.set(name, itemCache)      }  }

此時數(shù)據(jù)類以及操作類都已經(jīng)定義好,我們可以在api層這樣定義

// 生成key值錯誤  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錯誤          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就會 獲取null 而從服務(wù)端繼續(xù)請求          ExpriesCache.set(key, res, 10)      }      return data  }

該方案使用了過期時間和 api 參數(shù)不同而進(jìn)行緩存的方式。已經(jīng)可以滿足絕大部分的業(yè)務(wù)場景。

調(diào)用方式：

getWares(1,2).then( ... )  // 第二次調(diào)用 取得先前的promise  getWares(1,2).then( ... )  // 不同的參數(shù)，不取先前promise  getWares(1,3).then( ... )

方案五、基于修飾器的方案四

和方案四是的解法一致的，但是是基于修飾器來做。

代碼如下：

// 生成key值錯誤  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ù)端數(shù)據(jù)          if (key === generateKeyError)  {              // 利用剛才保存的函數(shù)體進(jìn)行請求              return fn.apply(null, arguments)          }          let promise = ExpriesCache.get(key)          if (!promise) {              // 設(shè)定promise              promise = fn.apply(null, arguments).catch(error => {                   // 在請求回來后，如果出現(xiàn)問題，把promise從cache中刪除                  ExpriesCache.delete(key)                  // 返回錯誤                  return Promise.reject(error)              })              // 使用 10s 緩存，10s之后再次get就會 獲取null 而從服務(wù)端繼續(xù)請求              ExpriesCache.set(key, promise, config[0])          }          return promise       }      return descriptor;  } // 制定 修飾器  function ApiCache(...args) {      return decorate(handleApiCache, args)  }

此時我們就會使用類來對api進(jìn)行緩存

class Api {      // 緩存10s      @ApiCache(10)      // 此時不要使用默認(rèn)值，因為當(dāng)前 修飾器 取不到      getWare(params1, params2) {          return request.get('/getWares')      }  }

因為函數(shù)存在函數(shù)提升，所以沒有辦法利用函數(shù)來做修飾器

例如:

var counter = 0;  var add = function () {    counter++;  };  @add  function foo() {  }

該代碼意圖是執(zhí)行后counter等于 1，但是實際上結(jié)果是counter等于 0。因為函數(shù)提升，使得實際執(zhí)行的代碼是下面這樣

@add  function foo() {  }  var counter; var add;  counter = 0;  add = function () {    counter++;  };

所以沒有辦法在函數(shù)上用修飾器。具體參考ECMAScript 6 入門 Decorator

此方式寫法簡單且對業(yè)務(wù)層沒有太多影響。但是不可以動態(tài)修改緩存時間

調(diào)用方式

getWares(1,2).then( ... )  // 第二次調(diào)用 取得先前的promise  getWares(1,2).then( ... )  // 不同的參數(shù)，不取先前promise  getWares(1,3).then( ... )

到此，關(guān)于“前端api請求緩存的方法是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

新聞標(biāo)題：前端api請求緩存的方法是什么
網(wǎng)頁網(wǎng)址：http://muchs.cn/article48/pppdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、App設(shè)計、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計、網(wǎng)站排名、網(wǎng)站設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容