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


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 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
物流合作计划书
2014/01/10 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书