Cache / Preload

You can enable the cache function by setting cacheKey. When the cache is enabled, VueRequest will cache the current request's result and wait until the component is initialized or another set of the same cacheKey. When the request is initialized, the cached data will be returned first if there is a cache. Then a new request will be initiated behind the scenes. This ensures that the data is presented to the user with the fastest data. This is also an implementation of preloading.

CacheTime

You can also set the recovery time of the cache. When the time to cache data exceeds the set cacheTime (the default is 600000 milliseconds, which is 10 minutes), VueRequest will automatically discard the cached data. After the next request is initiated, the new data is cached again.

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


 

StaleTime

Suppose you can ensure that the cached data will not be updated in a certain period. In that case, you can set a freshness time staleTime (default is 0, That is, no preservation). When the preservation time is set, VueRequest will consider the cached data fresh within that time and not initiate new requests. This can relieve the pressure of requests for some regularly updated interfaces.

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


 

Request sharing

Sharing request Promise, only one of the same cacheKey will initiate a request at the same time, and the subsequent ones will share the same request Promise.

In the example below, the contents of the two components are always synchronized, and only one request is made when they are triggered at the same time.

You can open the console and click the run button respectively to see the information printed on the console

Dynamic cacheKey

In addition to passing a string, cacheKey also supports passing a function. params is passed in as arguments to the function and returns a string as the final cacheKey. Through this function, the function of dynamic cacheKey can be realized.

TIP

The parameter params of the cacheKey function is undefined during initialization, so

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

Refer to the following example.

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 experience it through the following example

You can open the console, then toggle the radio option and see what the console log

Clear cache

VueRequest provides a clearCache method, which can clear the cache data of the specified cacheKey.

Custom cache

By setting setCache and getCache, you can customize the cache, for example, you can store data in localStorage, sessionStorage, etc.

  • setCache and getCache need to be used together.
  • In the custom cache mode, cacheTime and clearCache will be unused, please implement it yourself according to the actual situation.
Last Updated: 7/1/2022, 8:28:34 AM
Contributors: John