懒人版请求库alovajs教程7：缓存模式

alova是一个轻量级的请求策略库，旨在简化接口的管理和使用。它分为两部分：

1. 声明式实现复杂请求： 你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。

2. API自动管理和维护： 不用再自己编写请求函数，也不用再查阅API文档了，alova可帮你生成完整的、描述详尽的请求函数的TypeScript类型，让前端项目与服务器端无缝对接。当服务端API更新时，前端项目也会收到通知并阻止项目发布。

使用alovajs后，你只需要选择对应的useHook进行请求即可，被称为懒人版请求库，alova同时支持vue/react/svelte框架。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。

这里有很多可运行的demo

欢迎加入交流社区

有任何使用问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

• 加入在 Discord 社区参与交流
• 加入微信群参与交流

同时也欢迎贡献你的一份力量，请移步贡献指南。

以下为部分章节的教程，想学习更多 alovajs 的用法，欢迎来alova 官网学习。

缓存模式

缓存模式可以更好地多次利用服务端数据，而不需要每次请求时都发送请求获取数据。alova分别提供了 3 种缓存模式来满足不同的缓存场景，分别为内存模式、缓存占位模式、恢复模式。缓存模式可在全局或请求级等不同粒度下设置。全局设置时，所有由相同 alova 实例创建的Method实例都会继承该设置。

注意：是否使用缓存模式，以及使用哪种缓存模式需要根据场景而定，下面在单独介绍不同缓存模式时将会提及它们的使用场景。

内存模式（默认）

内存缓存模式示例，点此查看。

内存模式将缓存放在内存中，这意味着刷新页面缓存即失效，是最常用的缓存模式。

内存模式一般用于解决短时间内（几分钟或几秒钟）频繁请求相同数据带来的性能消耗，例如当你在写 todo 详情页的时候，你可能会想到用户会频繁在 todo 列表中点击查看详情，如果用户重复查看某条详情时不再重复请求接口，并且能立即返回数据，提升了响应速度的同时也减小了服务器压力。此时我们就可以为某个 todo 详情Method实例设置响应数据缓存。

alovaInstance.GET('/todo/list', {
  // ...
  // highlight-start
  localCache: {
    // 设置缓存模式为内存模式
    mode: 'memory',

    // 单位为毫秒
    // 当设置为`Infinity`，表示数据永不过期，设置为0或负数时表示不缓存
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

内存模式为默认模式，你可以这样简写

alovaInstance.GET('/todo/list', {
  // ...
  // highlight-start
  localCache: 60 * 10 * 1000
  // highlight-end
});

GET 请求将默认设置 300000ms(5 分钟)的内存缓存时间，开发者也可以自定义设置。

如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式

缓存占位模式

缓存占位模式示例：点此查看。

这个缓存模式用于，当你不希望应用每次进入时都显示 Loading 图标，而希望使用旧数据替代时，你可以使用缓存占位模式，它的体验比 Loading 更好。

缓存占位模式下，data将立即被赋值为上次缓存的旧数据，你可以判断如果有旧数据则使用它替代 Loading 展示，同时它将发送请求获取最新数据并更新缓存，这样就达到了既快速展示实际数据，又获取了最新的数据。

在Method实例上设置：

const todoListGetter = alovaInstance.Get('/todo/list', {
  // ...
  // highlight-start
  localCache: {
    // 设置缓存模式为持久化占位模式
    mode: 'placeholder',
    // 缓存时间
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式

恢复模式

恢复模式示例，点此查看

此模式下，服务端缓存数据将持久化，如果过期时间未到即使刷新页面缓存也不会失效，它一般用于一些需要服务端管理，但基本不变的数据，如每年的节假日具体日期有所不同，但不会再变动，这种场景下我们只需设置缓存过期时间为今年的最后一刻即可。

在Method实例上设置：

const todoListGetter = alovaInstance.Get('/todo/list', {
  // ...
  // highlight-start
  localCache: {
    // 设置缓存模式为持久化模式
    mode: 'restore',
    // 缓存时间
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

注意

当 request body 是FormData、Blob、ArrayBuffer、URLSearchParams、ReadableStream等特殊数据时，将会被认为你是有意图和服务端通信的，在这种情况下不会进行缓存。

如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式

恢复模式下数据有变怎么办？

当设置了恢复模式的Method实例，可能由于接口数据变动，或前端处理响应数据的逻辑变动，此时需要在发布应用后让用户重新缓存变动后的数据，此时你可以通过tag属性设置缓存标签，每一份持久化数据都包含一个tag标识，当tag改变后原有的持久化数据将会失效，并重新获取新的数据，并用新的tag进行标识。

const todoListGetter = alovaInstance.Get('/todo/list', {
  // ...
  localCache: {
    mode: 'restore',
    expire: 60 * 10 * 1000,

    // highlight-start
    // 新增或修改tag参数，已缓存的数据将失效
    // 建议使用版本号的形式管理
    tag: 'v1'
    // highlight-end
  }
});

全局设置缓存模式

版本要求 v1.3.0+

以上设置均是在Method上单独设置缓存模式的，如果你需要全局设置缓存模式，可以按如下方式做：

const alovaInstance = createAlova({
  // ...
  // highlight-start
  localCache: {
    // 统一设置POST的缓存模式
    POST: {
      mode: 'placeholder',
      expire: 60 * 10 * 1000
    },
    // 统一设置HEAD请求的缓存模式
    HEAD: 60 * 10 * 1000
  }
  // highlight-end
});

此后，通过alovaInstance实例创建的Method实例，都将默认使用这份缓存设置，同时也可以在Method实例中覆盖它。

注意：当全局设置了缓存模式后，原有的 5 分钟 GET 缓存模式将被覆盖。

全局关闭缓存模式

如果在你的项目中不希望使用任何请求缓存，可以在全局将它关闭，如果希望只在特定的几个请求中使用，也可以全局关闭它，并在指定的Method实例中设置即可。

const alovaInstance = createAlova({
  // ...
  // highlight-start
  // 设置为null即可全局关闭全部请求缓存
  localCache: null
  // highlight-end
});

缓存 key 自动维护

响应数据缓存的 key 是由 method 实例的请求方法(method)、请求地址(url)、请求头参数(headers)、url 参数(params)、请求体参数(requestBody)组合作为唯一标识，任意一个信息或位置不同都将被当做不同的 key。

（结尾）为什么要使用alova

alova 也致力于解决客户端网络请求的问题，但与其他请求库不同的是，alova 选择了业务场景化请求策略的方向，它配合axios/fetch api等请求库后能满足你绝大部分请求需求（99%）的同时，还提供了丰富的高级功能。

• 你可能曾经也在思考着应该封装fetch和axios，现在你不再需要这么做了，通过 alova 使用声明的方式完成请求，例如请求共享、分页请求、表单提交、断点上传等各种较复杂的请求，以及自动化缓存管理、请求共享、跨组件更新状态等。
• alova 是轻量级的，只有 4kb+，是 axios 的 30%+。
• 目前支持vue/react/react-native/svelte，以及next/nuxt/sveltekit等 SSR 框架，同时也支持Uniapp/Taro多端统一框架。
• alova 是低耦合的，你可以通过不同的适配器让 alova 在任何 js 环境下，与任何 UI 框架协作使用（内置支持的 UI 框架为vue/react/svelte），并且提供了统一的使用体验和完美的代码迁移。
• 使用 alova 还能实现 api 代码的高聚合组织方式，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势。

与其他请求库的对比

多框架支持

现在，你还可以在 vue options（vue2 和 vue3） 写法中完美使用 alova，点此查看详情。后续我们将陆续支持以下框架：

• 函数式，如solid/preact/qwik。
• class 式，如angular/lit/stencil。
• options 式，如原生小程序(中国🇨🇳)。

alovajs 还提供了其他强大的请求策略：

名称	描述	文档
分页请求策略	自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50%	usePagination
无感数据交互策略	全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用	useSQRequest
表单提交策略	为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能	useForm
文件上传策略	更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换	useUploader
发送验证码	验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。	useCaptcha
自动重新拉取数据	在一定条件下自动重新拉取数据，保证始终展示最新数据。	useAutoRequest
跨组件触发请求	一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数	actionDelegationMiddleware
串行请求的 useRequest	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数	useSerialRequest
串行请求的 useWatcher	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。	useSerialWatcher
请求重试策略	请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用	useRetriableRequest
SSE 请求	通过 Server-sent Events 进行请求	useSSE

想学习更多 alovajs 的用法，欢迎来alova 官网学习。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。

如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对 alovajs 怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~

欢迎加入交流社区

有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

• 加入在 Discord 社区参与交流
• 加入微信群参与交流

同时也欢迎贡献你的一份力量，请移步贡献指南。

往期文章

• 用声明式实现复杂请求，让代码优雅度直线上升
• 改变 axios 的用法后，我的工作效率提升了 3 倍
• 如何让 axios 提升分页管理效率
• 整会 promise 这 8 个高级用法，再被问倒来喷我