跳到主要内容
版本：v2

缓存模式

缓存模式可在全局或请求级等不同粒度下设置。全局设置时，所有由相同 alova 实例创建的 method 实例都会继承该设置。

注意

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

内存模式（默认）​

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

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

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

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

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

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

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

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

内存缓存模式示例​

缓存占位模式​

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

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

在 method 实例上设置：

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

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

缓存占位模式示例​

恢复模式​

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

在 method 实例上设置：

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

当 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,

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

全局设置缓存模式​

版本要求

v1.3.0+

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

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

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

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

全局关闭缓存模式​

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

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

过期时间类型​

过期时间有两种类型可供选择，分别为 相对时间 和 绝对时间

相对时间​

即在保存缓存数据时开始，过期的时长，以 毫秒 为单位，以上示例均为此类型。

localCache: 60 * 10 * 1000;
localCache: {
  expire: 60 * 10 * 1000,
}

绝对时间​

以一个具体时间点为过期时间，缓存将在设定的时间点过期

localCache: new Date('2030-01-01');
localCache: {
  expire: new Date('2030-01-01');
}

响应自动维护说明​

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

此外，数据缓存的 key 只在 method 实例创建时确定，在创建后修改其：请求方法(method)、请求地址(url)、请求头参数(headers)、url 参数(params)、请求体参数(requestBody) 任一都不会导致 key 发生变化，这会导致缓存指向同一个值。

如果你需要在上述情况下，缓存分别指向不同的值，请考虑动态创建 method。

const alovaInst = createAlova({
  // ...
  beforeRequest(method) {
    const sec = Math.floor(Date.now() / 1000);
    method.config.headers.sec = sec;
  }
});

const Getter = () =>
  alovaInst.Get('/user/profile', {
    // ...
    localCache: 10 * 1000
  });

// 调用函数来创建一个新的method
Getter().send();
// or
useRequest(Getter);
alova使用调查，花3分钟填下，求你了！alova用在项目里了吗？快来告诉我