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


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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
详细分析jsonp的原理和实现方式
Nov 20 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
JavaScript中reduce()的用法
May 11 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 array_search() 函数使用
2010/04/13 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jquery清空表单数据示例分享
2014/02/13 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
React组件生命周期详解
2017/07/03 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python 判断奇数偶数的方法
2018/12/20 Python
学习和使用python的13个理由
2019/07/30 Python
python tkinter控件布局项目实例
2019/11/04 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
汽车队司机先进事迹材料
2014/02/01 职场文书
人事专员的职责
2014/02/26 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
教育合作协议范本
2014/10/17 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书