在前端开发中，我们经常需要通过后端 API 来获取数据，然而每次请求都需要向后端发起一次网络请求，这既浪费资源又影响效率。如何避免重复请求呢？这就需要使用缓存技术，即将请求的结果缓存起来，在下一次请求时直接返回缓存结果。本文将介绍 npm 包 cached-method，帮助我们更加方便地使用缓存技术。
cached-method 是什么？
cached-method 是一个能够把一个函数的返回值缓存到内存中，从而减少重复计算的 npm 包。它支持异步函数、Promise 和普通函数。
安装与引入
我们可以使用 npm 命令行工具安装 cached-method 包：
npm install cached-method
引入 cached-method：
import cached from 'cached-method';
cached 方法
cached 方法是 cached-method 包的主方法，用于创建一个缓存函数。cached 方法接收两个参数：
- fn：一个函数，用于获取需要缓存的值
- options：配置项
cached 会返回一个新的函数，用于获取缓存值。例如：
const myFunc = () => new Date().getTime(); const myCachedFunc = cached(myFunc);
myCachedFunc 将会返回 myFunc 的返回值，并缓存起来。第一次调用 myCachedFunc 时，会先执行 myFunc，获取返回值，并将返回值缓存住。后面再调用 myCachedFunc 时，将直接返回缓存值。
配置项
cached 方法可以接收一个选项对象，用于配置缓存内容。下面是一些常见的配置项：
- maxAge：缓存有效时间，超过这个时间后缓存将失效。默认不限制时间
- cacheKey：缓存的 key 值，用于查找缓存，默认为函数的第一个参数
- resolver：用于生成 cacheKey 的回调函数，默认返回第一个参数
示例
下面是一个示例，我们创建一个函数来获取用户信息。我们希望在 5 分钟内不重复请求用户信息：
-- -------------------- ---- ------- ------ ------ ---- ---------------- ----- ------- - ----- -------- -- - ------------------ ------- ----- -------- - ----- ------------------------------ ----- ---- - ----- ---------------- ------ ----- - ----- ------------- - --------------- - ------- - - -- - ---- --- ----- ----------- - ----- -- -- - ----- ----- - ----- ----------------- ----- ----- - ----- ----------------- ----- ----- - ----- ----------------- ----------------- --- ------- -- ---- ----------------- --- ------- -- ----- -
当我们连续两次获取 userId 为 1 的用户信息时，cachedGetUser 只会调用一次 getUser，第二次将直接返回缓存值。而获取 userId 为 2 的用户信息时，cachedGetUser 会调用 getUser 并缓存结果。
结束语
cached-method 使我们的缓存代码变得更加简单、易读和灵活。通过使用它，我们可以更加高效地进行前端开发，减少对服务端 API 的请求，提高性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5781