Cache mode of alovajs, a request strategy library

Alova is a lightweight request strategy library designed to simplify interface management and usage. It consists of 2 parts:

1. Declarative implementation of complex requests: You can implement complex requests such as request sharing, pagination, form submission, breakpoint resume, etc. by simply configuring parameters without writing a lot of code, improving development efficiency and application performance and reduce pressure on the server.

2. API automatic management and maintenance: You no longer need to define the request functions by yourself, and you no longer need to consult the API documentation. alova can help you generate a complete and detailed TypeScript type of the request function, so that the front-end project can be integrated with the server-side seamless. When the server-side API is updated, the front-end project will also be notified and the project will be blocked from publishing.

There are many runnable examples here

With Alova, all you need to do is select the appropriate useHook for your requests, now it support React, Vue, and Svelte. If you find alova helpful, please consider star on GitHub repository.

Join Our Community

If you have any questions or need assistance, you can join our communication or start a discussion on GitHub repository for support. If you encounter any issues, please submit them on GitHub issues, and we'll address them as soon as possible.

• Join Discord

We also welcome contributions. For more information, please visit contribution guidelines.

For tutorials and more on how to use Alova, feel free to explore the alova documentation.

Cache mode

The cache mode can make better use of server-side data multiple times without sending a request to get data every time a request is made. alova provides three cache modes to meet different cache scenarios, namely memory mode, cache replaceholder mode, and restore mode. The cache mode can be set at different granularities such as global or request level. When set globally, all Method instances created from the same alova instance will inherit the setting.

note: Whether to use the cache mode and which cache mode to use depends on the scenario. The usage scenarios of different cache modes will be mentioned below when introducing different cache modes separately.

memory mode (default)

memory mode example: Click here to view。

The memory mode puts the cache in the memory, which means that the page cache is invalidated when it is refreshed, and is the most commonly used cache mode.

Memory mode is generally used to solve the performance consumption caused by frequent requests for the same data in a short period of time (minutes or seconds). For example, when you are writing a todo details page, you may think that users will frequently click on the todo list Check the details, if the user does not repeatedly request the interface when repeatedly viewing a certain detail, and can return the data immediately, the colleague who improves the response speed also reduces the pressure on the server. At this point we can set the response data cache for a todo detail Method instance.

alovaInstance.GET('/todo/list', {
  //...
  // highlight-start
  localCache: {
    // Set cache mode to memory mode
    mode: 'memory',

    // unit is milliseconds
    // When set to `Infinity`, it means that the data will never expire, and when it is set to 0 or a negative number, it means no caching
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

Memory mode is the default mode, you can abbreviate like this

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

GET requests will set the memory cache time of 300000ms (5 minutes) by default, and developers can also customize the settings.

If you need to set the caching mode globally, see [Global setting cache mode] at the bottom of this section (#Global setting cache mode)

cache replaceholder mode

cache replaceholder mode example: Click here to view。

This cache mode is used when you don't want to display the Loading icon every time the application is entered, but you want to use the old data instead, you can use the cache occupancy mode, which has a better experience than Loading.

In the cache occupancy mode, data will be immediately assigned the old data of the last cache. You can judge that if there is old data, use it to replace the Loading display. At the same time, it will send a request to obtain the latest data and update the cache, so as to achieve In order to quickly display the actual data, and obtain the latest data.

Set on Method instances:

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  // highlight-start
  localCache: {
    // Set the cache mode to persistent placeholder mode
    mode: 'placeholder',
    // cache time
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

If you need to set the caching mode globally, see [Global setting cache mode] at the bottom of this section (#Global setting cache mode)

restore mode

restore mode example: Click here to view。

In this mode, the server-side cached data will be persistent. If the expiration time is not reached, even if the page cache is refreshed, it will not be invalidated. It is generally used for some data that requires server-side management but is basically unchanged, such as the specific dates of annual holidays. It is different, but it will not change again. In this scenario, we only need to set the cache expiration time to the last moment of this year.

Set on Method instances:

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  // highlight-start
  localCache: {
    // Set the cache mode to persistent mode
    mode: 'restore',
    // cache time
    expire: 60 * 10 * 1000
  }
  // highlight-end
});

Note: When request body is special data such as FormData, Blob, ArrayBuffer, URLSearchParams, ReadableStream, it will be considered that you intend to communicate with server. In this case would not cache data.

If you need to set the caching mode globally, see [Global setting cache mode] at the bottom of this section (#Global setting cache mode)

What should I do if the data changes in restore mode?

When the Method instance in restore mode is set, it may be due to the change of the interface data or the logic change of the front-end processing response data. At this time, it is necessary to let the user re-cache the changed data after publishing the application. At this time, you can use tag The attribute sets the cache tag. Each piece of persistent data contains a tag identifier. When the tag changes, the original persistent data will become invalid, and new data will be obtained again, and the new tag will be used for identification .

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  localCache: {
    mode: 'restore',
    expire: 60 * 10 * 1000,

    // highlight-start
    // Add or modify the tag parameter, the cached data will be invalid
    // It is recommended to use version number management
    tag: 'v1'
    // highlight-end
  }
});

Cache key automatic maintenance

The key of the response data cache is uniquely identified by the combination of the request method (method), request address (url), request header parameters (headers), url parameters (params), and request body parameters (requestBody) of the method instance. Any information or Different positions will be treated as different keys.

(End)Why Use Alova

Alova is committed to addressing client-side network request challenges, but what sets it apart from other request libraries is its focus on business-scenario-driven request strategies. When used in conjunction with libraries like axios/fetch api, Alova can meet 99% of your request needs while offering a range of advanced features.

• You may have pondered over whether to encapsulate fetch and axios, but now you no longer need to. With Alova, you can use a declarative approach to fulfill complex requests, including request sharing, pagination, form submissions, and resumable uploads, as well as automated cache management, request sharing, and cross-component state updates.

• Alova is lightweight, occupying only 4kb+, which is just over 30% of Axios's size.

• It currently supports vue/react/react-native/svelte and SSR frameworks like next/nuxt/sveltekit, as well as cross-platform frameworks like Uniapp/Taro.

• Alova is loosely coupled, allowing you to use it in any JavaScript environment with any UI framework using different adapters. It offers a unified user experience and seamless code migration.

• Alova also promotes a highly organized approach for aggregating API code, grouping request parameters, cache behavior, and response data transformations in the same code blocks, which is advantageous for managing numerous APIs.

Compare Alova with other request libraries

Multi-Framework Support

Now, you can perfectly use Alova in vue options (vue2 and vue3) syntax. In the future, we plan to support the following frameworks:

• Functional ones like solid/preact/qwik.
• Class-based ones like angular/lit/stencil.
• Options-based ones like native Chinese mini-programs.

Alova also offers powerful request strategies:

Name	Description	Documentation
Pagination request strategy	Automatically manage paging data, data preloading, reduce unnecessary data refresh, improve fluency by 300%, and reduce coding difficulty by 50%	usePagination
Non-sense data interaction strategy	A new interactive experience, submission and response, greatly reducing the impact of network fluctuations, allowing your application to still be available when the network is unstable or even disconnected	useSQRequest
Form submission strategy	A hook designed for form submission. Through this hook, you can easily implement form drafts and multi-page (multi-step) forms. In addition, it also provides common functions such as form reset	useForm
File upload strategy	A simpler file upload strategy that supports automatic identification and conversion of base64, Blob, ArrayBuffer, and Canvas data	useUploader
Send verification code	Verification code sending hook reduces the complexity of developing the verification code sending function.	useCaptcha
Automatically re-pull data	Automatically re-pull data under certain conditions to ensure that the latest data is always displayed.	useAutoRequest
Trigger requests across components	An alova middleware that eliminates component-level restrictions and quickly triggers the operation function of any request in any component	actionDelegationMiddleware
UseRequest for serial requests	A more concise and easy-to-use serial request use hook than alova's serial request method, providing a unified loading status, error, callback function	useSerialRequest
UseWatcher for serial requests	A more concise and easy-to-use serial request use hook than alova's serial request method, providing a unified loading status, error, callback function.	useSerialWatcher
Request retry strategy	Automatic retry on request failure, which plays an important role on important requests and polling requests	useRetriableRequest
SSE requests	Requests via Server-sent Events	useSSE

For more in-depth learning about Alova, please visit the Alova documentation. If you find Alova helpful, please star on GitHub repository.

If you find this article helpful, don't hesitate to like and comment. Share your thoughts on Alova or ask any questions you may have. Your support is our greatest motivation!

Join Our Community

If you have any questions, you can join our community chat groups or start discussions on the GitHub repository. If you encounter any issues, please submit them on GitHub's issues page, and we will address them promptly.

• Join our Discord community for discussions

We also welcome contributions. For more information, please visit our contribution guidelines.