华山资源网

微信小程序中网络请求缓存的解决方法
网络编程 2024/11/15 佚名
3 1

需求

提交小程序审核时，有一个体验测评，产品让我们根据小程序的体验测评报告去优化小程序。

其中有一项是网络请求的优化，给我们出了很大的难题。

文档中是这样解释的：3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容

看到这个问题的时候，首先想到的是在响应头上加上cache-control，经过测试发现小程序并不支持网路请求缓存。搜索发现官方明确答复，小程序不支持网络请求缓存：wx.request不支持http缓存

既然官方不支持网络请求缓存，那只能自己想办法解决这个问题了。

先来看一下需求：3分钟内，同一请求只能请求一次。

分析

分析：

  • 只需做GET请求的网络缓存。
  • 缓存时间如何控制。
  • 做了缓存之后，如何知道3分钟，这个请求在服务端数据有没更新。
  • 提交GET请求前，先检查本地有没有缓存

前两点比较好实现，虽然小程序不支持网络请求缓存，但我们还是可以利用cache-control来实现这个功能。

首先网络请求需不需要情缓存统一交给服务端去做，服务端在处理GET请求时，统一加上响应头cache-control，如果需要缓存就用max-age=180，如果不需要做网络请求就用no-cache。前端根据响应头信息自己做前端缓存。

其中的难点是前端如何知道服务端数据有没更新，如果服务端数据更新了，前端还是使用缓存这是有问题的。

经过一番思考后发现，前端提交数据后，相应的GET请求数据会更新，也就是说前端只要有数据提交，就应该把缓存清空。

这有一个难点，当前端提交数据时，前端是不知道哪些GET请求会因此更新数据，所以这个问题我们没有解决，我的方法比较粗暴：只要前端提交了数据，就将所有缓存清空。这是一个治标不治本的问题。

实现

公司项目封装了HTTP请求

拦截请求，如果是GET请求，检查缓存，

  • 如果缓存没过期，将缓存返回出去，不再发请求
  • 如果缓存过期，发请求
if (request.method.toLowerCase() === "get"){
 // param 请求信息
 const cache = this.handleCatchControl(request)
 if (!cache.isRequest)
 return this.listener.onApiResponse(request, 200, cache.data), sequence; //将缓存返回给对应的请求
}

缓存网络请求

// param 响应头，上下文，响应数据
this.setCatchControl(headers, context, response.data)

两个工具函数

  • 处理网络缓存
  • 设置网络缓存

设置网络请求

  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}
}

响应头全部变成小写，在小程序中，无法确定响应头的大小写会导致报错，所以统一处理响应头

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. 无需在退出小程序时手动清理缓存

我在使用时遇到一个坑，是因为自己没有理解：类能保存数据的，不能保存状态，但类的对象是既可以保存数据，也可以保存状态的。

最后，此方法还是有很大的优化空间。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com