Cache and Preloading

You can enable caching functionality by setting the cacheKey. When caching is enabled, VueRequest caches the results of the current request. The next time the component is initialized, or another request with the same cacheKey is initialized, if there is a cache, it will return the cached data first, and then initiate a new request in the background. This ensures that data is displayed to the user as quickly as possible, which is also a form of preloading.

Cache time

You can also set the cache expiration time. When the cache data exceeds the set cacheTime (default is 600000 milliseconds, which is 10 minutes), VueRequest will automatically discard the cached data and re-cache new data the next time a request is made.

const { data } = useRequest(getJobType, {
  cacheKey: 'JobType',
  cacheTime: 5 * 60 * 1000, // 5 minutes
});

Stale time

If you can ensure that the cached data will not be updated within a certain time, you can set a stale time staleTime (default is 0, which means no staleness). When a stale time is set, VueRequest will consider the cached data to be fresh within that time window and will not initiate a new request. This can reduce the load on some interfaces that are updated regularly.

const { data } = useRequest(getJobType, {
  cacheKey: 'JobType',
  staleTime: 60 * 60 * 1000, // 60 minutes
});

Request sharing

When two requests have the same cacheKey, only one request will be initiated at a time. The later request will share the same request with the first request.

In the following example, the content of the two components is always synchronized, and only one request is initiated when both are triggered simultaneously.

You can open the console and click the "run" button for each component to see the console output.

Dynamic cacheKey

In addition to passing a string as the cacheKey, you can also pass a function. The params are passed as the parameter to the function, which returns a string as the final cacheKey. This function can be used to implement dynamic cacheKey functionality.

TIP

The input parameter params of the cacheKey function is undefined during initialization. Therefore,

• When manual = false: return a key generated from default parameters or an empty string.
• When manual = true: return an empty string.

See the following example for reference.

const { data } = useRequest(getJobType, {
  manual: true,
  cacheKey: params => {
    if (params && params[0]) {
      return `JobType-${params[0]}`;
    }
    return '';
  },
  staleTime: 60 * 60 * 1000, // 60 minutes
});

You can use the following example to experience the effect:

You can open the console, switch the radio options, and check the console output.

Clearing cache

VueRequest provides a clearCache method that can clear specified cacheKey or all cached data.

Custom cache

By configuring setCache and getCache, you can customize data caching, such as storing data in localStorage, sessionStorage, etc.

• setCache and getCache must be used together.
• In custom cache mode, cacheTime and clearCache will not work, please implement them yourself.