【微信小程序】使用缓存技术优化代码

使用缓存技术优化代码

问题：接口的返回数据量太大了
解决：使用缓存技术优化
微信小程序官方文档：数据缓存
存：wx.setStorageSync(key, data) 取：wx.getStorageSync(key)
不存在类型转换的操作，存什么类型的数据进去，获取时就是什么类型

• 0 把接口中的数据存入本地存储中 wx.setStorageSync(key, data)
• 1 获取本地存储中的数据 wx.getStorageSync(key)
• 2 判断本地存储中有没有旧数据
  • 2.1 没有旧数据-直接发送新请求获取数据
  • 2.2 有旧数据-判断旧数据是否过期
    定义过期时间 10s 改为 5min
    if (Date.now() - Cates.time > 1000 * 10)
    • 2.2.1 有旧数据但过期了-重新发送新请求获取数据
    • 2.2.2 有旧数据也没过期-使用本地存储中的旧数据

pages/category/category.js

import { request } from "../../request/request.js";
Page({
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧菜单
    currentIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  },
  
  // 接口的返回数据
  Cates: [],
  
  onLoad: function (options) {
    // 1.获取本地存储中的数据
    const Cates = wx.getStorageSync("cates");
    // 2.判断本地存储中有没有旧数据
    if (!Cates) {
      // 2.1 没有旧数据-直接发送新请求获取数据
      this.getCates();
    } else {
      // 2.2 有旧数据-判断旧数据是否过期
      // 定义过期时间 10s 改为 5min
      if (Date.now() - Cates.time > 1000 * 10) {
        // 2.2.1 有旧数据但过期了-重新发送新请求获取数据
        this.getCates();
      } else {
        // 2.2.2 有旧数据也没过期-使用本地存储中的旧数据
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map((v) => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent,
        });
      }
    }
  },
  
  // 获取分类页面数据
  getCates() {
    request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
    }).then((result) => {
      this.Cates = result.data.message;
      // 把接口中的数据存入本地存储中
      wx.setStorageSync("cates", {
        time: Date.now(),
        data: this.Cates
      });
      // 构造左侧的菜单数据
      let leftMenuList = this.Cates.map((v) => v.cat_name);
      // 构造右侧的商品数据
      let rightContent = this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightContent
      });
    });
  },
  
  // 左侧菜单的点击事件
  handleItemTap(e) {
    // 1.获取被点击的标题身上的索引
    const { index } = e.currentTarget.dataset;
    // 3.根据不同的索引渲染右侧内容
    let rightContent = this.Cates[index].children;
    // 2.给data中的currentIndex赋值
    this.setData({
      currentIndex: index,
      rightContent,
      // 重新设置右侧内容的滚动条距离顶部的距离
      scrollTop: 0
    });
  }  
});