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
andgetCache
must be used together.- In custom cache mode,
cacheTime
andclearCache
will not work, please implement them yourself.