微信小程序中网络请求缓存的解决方法


Posted in Javascript onDecember 29, 2019

需求

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

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

文档中是这样解释的: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. 无需在退出小程序时手动清理缓存

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

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

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

Javascript 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 #Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 #Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
You might like
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP 裁剪图片
2021/03/09 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python PO设计模式的具体使用
2019/08/16 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
说明书格式及范文
2014/05/07 职场文书
如何写求职信
2014/05/24 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
旷课检讨书范文
2014/10/30 职场文书
大学生毕业个人总结
2015/02/15 职场文书
党纪处分决定书
2015/06/24 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript
python turtle绘图
2022/05/04 Python