微信小程序缓存技术:https://www.bilibili.com/video/BV1nE41117BQ?p=63
/**
- 思路:
- 1.先判断本地存储中有没有旧数据
- 2.没有旧数据,直接发送新请求
- 3.有旧数据,同时旧数据没有过期,就使用本地存储中的数据
*/
//request.js
/*封装的网络请求*/
export const request=(params)=>{
return new Promise((resolve,reject)=>{
wx.request({
...params,
success: (result)=>{
resolve(result)
},
fail: (error)=>{
reject(error)
},
complete: ()=>{}
});
})
}
//index.js文件
/* 引入网络请求模块 */
import { request } from \'../../request/request.js\';
// pages/category/category.js
Page({
/**
* 页面的初始数据
*/
data: {
cates: [], //分类数据
leftMenuList: [], //分类左侧菜单数据
rightContent: [], //分类右侧数据
currentIndex: 0, //被点击的左侧菜单
},
Cates: [], //分类接口的返回值
/*分类页面数据请求 */
getCateList() {
request({
url:
\'https://api-hmugo-web.itheima.net/api/public/v1/categories\',
}).then((res) => {
this.Cates = res.data.message; //网络请求结果
/**将接口数据放到本地Storage中,key为cates,value是一个obj*/
wx.setStorageSync(\'cates\', {
time: Date.now(),
data: this.Cates,
});
console.log(\'数据已放到本地Storage中\');
let leftMenuList = this.Cates.map((n) => n.cat_name); //筛选分类左侧数据
let rightContent = this.Cates.map(
(n) => n.children
)[0]; //筛选分类右侧数据
/* 设置数据 */
this.setData({
leftMenuList,
rightContent,
});
});
},
/* 左侧菜单的点击事件 */
leftItemTap(e) {
const { index } = e.currentTarget.dataset;
let rightContent = this.cates.map((n) => n.children)[
index
]; //筛选分类右侧数据
this.setData({
currentIndex: index,
rightContent,
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/* 设置缓存技术 */
const Cates = wx.getStorageSync(\'cates\');
if (!Cates) {
// 不存在数据,发送请求获取数据
console.log(\'本地Storage数据为空,发送网络请求\');
this.getCateList();
} else {
// 数据未过期,假设10秒内数据没有过期
if (Date.now() - Cates.time > 1000 * 10) {
console.log(\'数据超过10秒,重新发送请求\');
this.getCateList();
} else {
console.log(
\'本地存储有数据,并且没有超过5秒,没有过期,可以使用本地存储的数据\'
);
this.Cates = Cates.data;
let leftMenuList = this.Cates.map(
(n) => n.cat_name
); //筛选分类左侧数据
let rightContent = this.Cates.map(
(n) => n.children
)[0]; //筛选分类右侧数据
this.setData({
leftMenuList,
rightContent,
});
}
}
},
});
const billList = uni.getStorageSync(\'bill\') == \'\' ? \'{}\' : uni.getStorageSync(\'bill\');
const bill = JSON.parse(billList);
if (bill[r] == undefined) {
const res = await this.queryResult(day);
console.log(\'网络请求七天\');
this.bill[r] = res;
bill[r] = res;
uni.setStorageSync(\'bill\', JSON.stringify(bill));
} else if (bill[r] == \'null\') {
const res = await this.queryResult(day);
console.log(\'网络请求七天\');
this.bill[r] = res;
bill[r] = res;
uni.setStorageSync(\'bill\', JSON.stringify(bill));
} else {
console.log("缓存中的数据")
this.bill[r] = bill[r];
}
请发表评论