Cache & SWR #

If options.cacheKey is set, useRequest will cache the successful data . The next time the component is initialized, if there is cached data, we will return the cached data first, and then send a new request in background, which is the ability of SWR.

You can set the data retention time through options.staleTime. During this time, we consider the data to be fresh and will not re-initiate the request.

You can also set the data cache time through options.cacheTime, after this time, we will clear the cached data.

Next, through a few examples to experience these features.

SWR #

Keep your data fresh #

Data sharing #

The content of the same cacheKey is shared globally, which will bring the following features

• 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.
• Data synchronization. At any time, when we change the content of one of the cacheKey, the content of the other cacheKey will be synchronized. In the following example, the two components will only initiate one request during

Parameters cache #

The cached data includes data and params. Through the params caching mechanism, we can remember the conditions of the last request and initialize it next time.

Clear cache #

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

Custom sync cache #

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

Custom async cache #

Example localforage 、 indexDB.

API #

interface CachedData<TData, TParams> {
  data: TData
  params: TParams
  time: number
}

interface CachedData<TData, TParams> {
  data: TData
  params: TParams
  time: number
}

Options #

clearCache #

import { clearCache } from 'vue-hooks-plus/es/useRequest';
clearCache(cacheKey?: string | string[]);

import { clearCache } from 'vue-hooks-plus/es/useRequest';
clearCache(cacheKey?: string | string[]);

1. Support clearing a single cache, or a group of caches
2. If cacheKey is empty, all cached data will be cleared

Source #

Source • Docs • Demo