用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序中解決網絡請求緩存

Rolan 2019-12-30 00:45

需求 提交小程序審核時,有一個體驗測評,產品讓我們根據小程序的體驗測評報告去優化小程序。 其中有一項是網絡請求的優化,給我們出了很大的難題。 文檔中是這樣解釋的:3分鐘以內同一個url請求不出現兩次回包大于1 ...

需求

提交小程序審核時,有一個體驗測評,產品讓我們根據小程序的體驗測評報告去優化小程序。

其中有一項是網絡請求的優化,給我們出了很大的難題。

文檔中是這樣解釋的:3分鐘以內同一個url請求不出現兩次回包大于128KB且一模一樣的內容

看到這個問題的時候,首先想到的是在響應頭上加上cache-control,經過測試發現小程序并不支持網路請求緩存。搜索發現官方明確答復,小程序不支持網絡請求緩存:wx.request不支持http緩存

既然官方不支持網絡請求緩存,那只能自己想辦法解決這個問題了。

先來看一下需求:3分鐘內,同一請求只能請求一次。

分析

分析:

  1. 只需做GET請求的網絡緩存。
  2. 緩存時間如何控制。
  3. 做了緩存之后,如何知道3分鐘,這個請求在服務端數據有沒更新。
  4. 提交GET請求前,先檢查本地有沒有緩存

前兩點比較好實現,雖然小程序不支持網絡請求緩存,但我們還是可以利用cache-control來實現這個功能。

首先網絡請求需不需要情緩存統一交給服務端去做,服務端在處理GET請求時,統一加上響應頭cache-control,如果需要緩存就用max-age=180,如果不需要做網絡請求就用no-cache。前端根據響應頭信息自己做前端緩存。

其中的難點是前端如何知道服務端數據有沒更新,如果服務端數據更新了,前端還是使用緩存這是有問題的。

經過一番思考后發現,前端提交數據后,相應的GET請求數據會更新,也就是說前端只要有數據提交,就應該把緩存清空。

這有一個難點,當前端提交數據時,前端是不知道哪些GET請求會因此更新數據,所以這個問題我們沒有解決,我的方法比較粗暴:只要前端提交了數據,就將所有緩存清空。這是一個治標不治本的問題。

實現

公司項目封裝了HTTP請求

  1. 攔截請求,如果是GET請求,檢查緩存,
    • 如果緩存沒過期,將緩存返回出去,不再發請求
    • 如果緩存過期,發請求
if (request.method.toLowerCase() === "get"){
  // param 請求信息
  const cache = this.handleCatchControl(request)
  if (!cache.isRequest)
    return this.listener.onApiResponse(request, 200, cache.data), sequence;   //將緩存返回給對應的請求
}
復制代碼
  1. 緩存網絡請求
// param 響應頭,上下文,響應數據
this.setCatchControl(headers, context, response.data)
復制代碼
  1. 兩個工具函數
    • 處理網絡緩存
    • 設置網絡緩存
  • 設置網絡請求
    1. GET請求緩存數據,其他請求清空數據
    2. 數據格式:
    //如果同時發起多個`GET`請求,需要拼接之前緩存數據
    ApiAgent.cacheData = Object.assign(ApiAgent.cacheData,{
      [context.request.url]: {    //api
        data,   //響應數據
        expireTime: Number(cacheControl.split("=")[1] + '000'),   //過期時間
        cacheTime: new Date().getTime(),    //緩存時間
      }
    })
    復制代碼
// param 響應頭,上下文,響應數據
setCatchControl(responseHeader: any, context: any, data: any) {
  if (context.request.method.toLowerCase() === "get") {
    const headers = HandleHeaders.get(responseHeader)
    const cacheControl = headers["cache-control"]
    if (cacheControl && cacheControl !== "no-cache") {
      ApiAgent.cacheData = Object.assign(ApiAgent.cacheData,{
        [context.request.url]: {
          data,
          expireTime: Number(cacheControl.split("=")[1] + '000'),
          cacheTime: new Date().getTime(),
        }
      })
    }
  } else {
    ApiAgent.cacheData = {}
  }
}
復制代碼
  • 處理網絡緩存
    1. 判斷緩存是否存在
    2. 判斷緩存有沒過期,在設置緩存時,比對當前時間和緩存時間,是否小于失效時間
// param 請求信息
handleCatchControl(request): any {
  const cacheArr = ApiAgent.cacheData
  if (Object.keys(cacheArr).length === 0)
    return { isRequest: true }
  let cache = {}
  Object.keys(cacheArr).forEach(cacheArrKey => {
    if (cacheArrKey === request.url) {
      cache = cacheArr[cacheArrKey]
    }
  })
  const newDate = new Date().getTime()
  if (newDate - cache.cacheTime < expireTime){
    return { isRequest: false, data: cache.data }
  }
  return { isRequest: true}
}
復制代碼
  1. 響應頭全部變成小寫,在小程序中,無法確定響應頭的大小寫會導致報錯,所以統一處理響應頭
class HandleHeaders {
  static get(headers: { [key: string]: string }) {
    const headersData: any = {}
    Object.keys(headers).forEach(key => {
      headersData[key.toLowerCase()] = headers[key]
    })
    return headersData
  }
}
復制代碼

總結

有一點沒有說,就是這個緩存是保存在哪里的?

既沒有用localStorage,也沒有用globalapp,用的是類的靜態屬性。

這樣做有3個好處:

  1. 使用localStorage數據不好清除,后期可維護性也較差
  2. 緩存掛在globalapp和請求無直接聯系
  3. 無需在退出小程序時手動清理緩存

我在使用時遇到一個坑,是因為自己沒有理解:類能保存數據的,不能保存狀態,但類的對象是既可以保存數據,也可以保存狀態的。

最后,此方法還是有很大的優化空間。

另外可添加微信ttxbg180218交流

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 天天天天天 來自: 掘金
梦幻单人赚钱方法