缓存

SWR (Stale-While-Revalidate)

通过设置 cacheKey，useRequest 实现了 SWR (Stale-While-Revalidate) 能力。SWR 是一种缓存策略，它允许你在请求新数据的同时，立即返回旧的（stale）数据，从而提升用户体验。

• Stale (旧数据): 当你发起请求时，如果缓存中存在旧数据，useRequest 会立即返回它，让界面可以快速展示内容。
• While-Revalidate (后台重新验证): 与此同时，useRequest 会在后台发起一个新的网络请求，以获取最新的数据。当新数据返回后，它会自动更新界面。

使用方式

import  useRequest  from '@pluve/use-request-vue';

const { data, run } = useRequest(
  (params) => fetch('/api/user', { params }).then(res => res.json()),
  {
    cacheKey: 'user-data', // 必填，缓存的唯一标识
    manual: true, // 需要手动触发请  },
);

// 第一次调用会发送请求并缓存结果
run();

// 后续调用会直接返回缓存的结果，不会发送请run();

配置

cacheKey

• 类型：string
• 必填：是
• 说明：缓存的唯一标识
  • 相同 cacheKey 的请求会共享缓存

staleTime

• 类型：number
• 默认值：0
• 说明：数据保持新鲜的时间（毫秒）。在此时间内，我们认为数据是新鲜的，不会重新发起请求。如果设置为 0，则表示数据永远是旧的，总会重新发起请求。

cacheTime

• 类型：number
• 默认值：300000 (5 分钟)
• 说明：缓存数据在内存中保留的时间（毫秒）。超过此时间，缓存数据将被清除。

使用场景

1. *数据持久化

   • 保存用户表单数据，避免页面刷新后数据丢失

2. 减少重复请求

   • 在多个组件中使用相同的数据时，可以共享缓

3. 离线使用

   • 在网络不可用时，可以显示上次缓存的旧数据

注意事项

1. 缓存是基于 cacheKey 的，请确保 cacheKey 的唯一性
2. 敏感数据不建议使用缓存，或者需要设置较短的 cacheTime
3. 当数据变化频繁时，可以适当调整 staleTime 来平衡性能和实时性

示例

基本使用

<template>
  <div>
    <button @click="run">获取用户信息</button>
    <div v-if="loading">加载..</div>
    <div v-else-if="error">错误: {{ error.message }}</div>
    <div v-else>
      <p>用户 {{ data?.name }}</p>
      <p>邮箱: {{ data?.email }}</p>
    </div>
  </div>
</template>

<script setup>
import useRequest from '@pluve/use-request-vue';

const { data, loading, error, run } = useRequest(() => fetch('/api/user/1').then((res) => res.json()), {
  cacheKey: 'user-1',
  manual: true,
});
</script>

SWR 示例

下面的例子中，我们设置了 5 分钟的缓存时间 和 1 分钟的新鲜时间。

const { data, loading } = useRequest(() => fetch('/api/articles').then((res) => res.json()), {
  cacheKey: 'articles-list',
  staleTime: 60 * 1000, // 1分钟内数据是新鲜的
  cacheTime: 5 * 60 * 1000, // 5分钟后缓存被清除
});

行为分析:

1. 首次请求: loading 为 true，请求成功后，数据被缓存。
2. 1 分钟内: 再次进入组件，useRequest 发现数据是新鲜的，会立即返回缓存数据，loading 始终为 false，不会发送网络请求。
3. 1 分钟后，5 分钟内: 再次进入组件，useRequest 发现数据已过期（stale），它会：
   • 立即返回缓存的旧数据（loading 仍为 false）。
   • 同时在后台发送一次新的网络请求（此时 loading 变为 true）。
   • 请求成功后，用新数据更新界面，loading 变回 false。
4. 5 分钟后: 缓存已被清除。行为同首次请求。