lodash的memoize用法

最新推荐文章于 2026-06-06 08:10:43 发布

原创最新推荐文章于 2026-06-06 08:10:43 发布 · 989 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Javascript

当前文章被收录于：

Javascript

2 篇文章 0 人学习

项目中常用js和ts方法与踩坑

订阅专栏查看详情

当前文章被以下社区和专栏收录：

代码可运行

本文介绍了如何在项目中使用lodash的memoize函数来预加载接口数据并实现缓存，以提高页面加载速度。通过记忆化处理，即使接口响应慢，也能保证首屏加载并避免页面错误或崩溃。

文章目录

概要

最近为了解决项目上接口请求慢而阻塞页面加载的问题,使用了lodash的memoize提前做了接口加载,使用memoize有两个优点

可以在首页提前加载数据,只要参数没有变化,后续页面可以直接使用缓存,不必重新请求接口,提升页面效果
即使接口返回数据慢,首屏没有加载完就进入到下一页面,这时会在下一页面重新请求接口,不会造成页面报错或崩溃

名词解释

_.memoize(func, [resolver]) 函数可以对一个函数进行记忆化处理，即缓存该函数的计算结果。

func:(Function): 需要缓存化的函数.
[resolver] (Function): 这个函数的返回值作为缓存的 key。

代码部分

// 缓存字典内容
getDictionary  = _.memoize(
	params=>this.getDictionaryApi(params).then(res=>this.formatData(res)), // 返回一个函数方法作为参数
	key
)
// 获取数据
getData() {
	const params = { code:''2100000 }
	return this.getDictionary(params)
}
// 调用方法
this.getData()

阅读完本文您可以尝试下面操作：

标签

#前端

分类前端开发