「工作小记」接口请求数据的缓存实践

2022 年 9 月 06 日
北京
本文字数：2012 字
阅读完需：约 7 分钟

灵感来源

最近在做新需求开发的时候，我发现某些页面进入时需要加载 4、5 个接口，我检查这些接口，发现大部分是基础数据，比如省、市、区或者某些特定分类（比如商品分类）等。这个数据需要通过后端接口请求获取，然后将数据回显到前端页面，让用户找到自己想要查询的筛选项。

每次进入带有省份筛选条件的列表页面，为了支持用户可以按照某个省份进行筛选的操作，都会将省份接口请求一次，拿到全部的省份列表。其实省份数据更新的频率很低，于是我就想如果用数据缓存替代接口请求是不是也可以？

假设与求证

再开始设计功能之前，我找到后端的同事进行了确认，我们的省市区等基础数据，除非有特殊情况，基本不会更新。于是为了保险，我将缓存设置为了会话缓存，没有设置持久缓存。其实持久缓存设置过期时间也可以，但是因为是功能优化，优化的前提是不能带来额外的问题，所以为了稳妥，我采用了会话缓存。

纸上得来终觉浅，绝知此事要躬行

“大抵学问只有两途，致知力行而已。”我是个行动派，脑子里有了这个想法就着手去实现。

我们的项目是用 React 框架实现的，所以下面的功能实现均用 JSX 语法。

功能流程图

provinceList：全部省份数组变量；
通过判断 sessionStorage 中是否有 provinceList 的值确定是否还需要请求省份接口，如果有值，不请求接口，直接将 sessionStorage 中 provinceList 的值赋值给 provinceList 变量；如果没有值，请求接口，将接口返回的 provinceList 值赋值给 provinceList 变量，同时存到 sessionStorage 中。

UI 交互

功能实现

封装公共方法

将该功能提炼成公共方法，根据需要获取的值的 type 不同区分数组对象和 api 接口请求；
apiMethodObj：定义接口方法变量，包括 api 接口和 api 接口入参两个变量。用定义对象变量的方式替代条件判断的方式，更方便维护和扩展，且不会带来额外的测试工作量。
callback: 回调函数，将最终获取的数据通过回调返回

/** * @description 公共方法-获取sessionStorage数据 * @param {string} type 搜索项数组对象type值 * @param {Function} callback 回调函数 * @return {Array} 搜索项数组对象 */import { findProvince } from '@/api/base';
const getSessionInfo = (type, callback) => {  let sessionInfo = JSON.parse(sessionStorage.getItem('sessionInfo')) || {};  let list = sessionInfo[type] ? sessionInfo[type] : [];  // =>true: sessionStorage的数组对象值为空时，请求接口  if (list.length === 0) {    /** @name 接口方法变量 */    let apiMethodObj = {      provinceList: {        api: findProvince, // api接口        params: {          size: 100,          page: 1,        }, // api接口入参      },    };    /** @name 接口方法item变量 */    let apiItem = apiMethodObj[type];    apiItem['api'](apiItem['params']).then(res => {      if (res) {        // 重置sessionStorage中的sessionInfo值        sessionInfo[type] = list;        sessionStorage.setItem('sessionInfo', JSON.stringify(sessionInfo));        // 回调数组对象        callback && callback(res.list);      }    });  } else {    // 回调数组对象    callback && callback(list);  }};
export default getSessionInfo;

复制代码

使用

设置省份数组对象

/** @name 设置省份数组对象 */const [provinceList, setProvinceList] = useState([]);

复制代码

搜索通过 anti 提供的 form 表单实现，搜索项为 select 下拉

<Form labelAlign='left' onFinish={this.handleSearch} ref={this.formRef}>  <Form.Item label='省份' name='provinceId'>    <Select placeholder='请选择' allowClear>      {provinceList.map(item => (        <Select.Option key={item.provinceId} value={item.provinceId}>          {item.provinceName}        </Select.Option>      ))}    </Select>  </Form.Item></Form>

复制代码

获取 provinceList 的值

useEffect(() => {  getSessionInfo('provinceList', list => {    setProvinceList(list);  });}, []);

复制代码

功能小结

以上省份列表数据缓存的功能就实现了。我们来看一下接口请求是否只出现了一次。下面的截图是我第一次进入页面到不断刷新页面的截图，可以看到 findProvince 接口只请求了一次：

浏览器缓存中 sessionInfo 对象已经有了数据，整个会话过程中，provinceList 都会去缓存中的数据，除非手动删除缓存或者关闭会话。

总结

已经完成的小事，胜于计划中的大事。——雷特

新的一年，我致力于性能优化，前端性能优化涉及到很多方面，其中一条为减少 http/https 请求，优化接口请求，也可以帮忙做到这一点。

最后，还是要提醒一点，优化尽量不要带来额外的问题，所以进行接口数据缓存的时候，需要考虑数据的更新频率，尽量选择更新频率低甚至不更新的数据进行优化操作，且如果做永久缓存的话，尽量设置缓存时效，避免带来因为数据缓存导致数据不准的问题。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/d4009628c00526914e4af6012】。文章转载请联系作者。

叶一一

关注

苍生涂涂，天下缭燎，诸子百家，唯我纵横。 2022.09.01 加入

非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。

发布

暂无评论

创作场景

「工作小记」接口请求数据的缓存实践

灵感来源

假设与求证

纸上得来终觉浅，绝知此事要躬行

功能流程图

UI 交互

功能实现

封装公共方法

使用

功能小结

总结

叶一一

评论