A lightweight request strategy library, which provides targeted request strategies for different request scenarios to improve application availability and fluency, reduce server pressure, and enable applications to have excellent strategic thinking like a wise man.
English | πδΈζ
- πͺ Interactive docs & demos
- πΆ Support vue, react, svelte
- π¦Ύ Real-time automatic status management
- π Similar api design to axios, easier
- βͺοΈ 4kb, only 30%+ of axios
- π Declarative Scenario Request
- π© Flexible: Work with any request library like axios, superagent, or fetch-api
- π 3 response data caching modes
- β¨ Interface data is pre-fetched in any case, which means users can see information faster
- π Typescript support
- π₯οΈ Offline submition
- β‘ Fully tree shakeable: Only take what you want, bundle size
- π Rich extension functions, you can customize request adapter, storage adapter, request middleware, states hook
The examples here will show the power of alova.
The original intention of alova is to propose a solution for different request scenarios. It can implement request functions with better experience and performance more concisely and elegantly. It is an RSM implementation library, such as $.ajax, axios and fetch-api. It provides good support for request sending and response receiving. They are an indispensable part of the RSM process (request event link), and alova still needs to rely on them for requests, so we can regard alova as a request library. An armament that makes the request library even more powerful.
It has been nearly a year since the development of the first version of alova. During this year, we have been continuously discovering and optimizing problems. So far, alova has passed 128 unit tests, with a coverage rate of 99%. Even so, alova is still a rookie, so I suggest you use it conservatively.
I promise to solve it as soon as possible after receiving your issue
If you like alova. we are very appreciate your star at the topright. it's a approval of our work.
alova | axios | react-query | vue-request | vue | react |
---|---|---|---|---|---|
We always have to think about the following questions when making a request,
- When is the request made;
- Whether to display the request status;
- Whether to encapsulate it into a request function for repeated calls;
- How to process the response data;
- Whether to cache frequently used response data;
- How to operate data across pages;
- Can I still submit data when I am offline?
- ...
fetch
or axios
tend to focus more on how to interact with the server, but we always need to deal with the above problems by ourselves. These functions that are beneficial to application performance and stability will always allow programmers to write low-maintenance functions. sexual code. The request scene management is to abstract all the links from the preparation of the request to the completion of the response data processing, so as to cover the model of the entire CS interaction life cycle from the perspective of the front end. alova
is a request scene management library based on the request scene model. It is a supplement to the request library such as axios
, not a replacement.
CS interaction: refers to all client types and server-side data interaction
Describes when a request needs to be made, implemented as useHook
in alova
.
- Initialize display data, such as just entering an interface or sub-interface;
- Human-computer interaction triggers CS interaction, which requires changing data to re-issue requests, such as page turning, filtering, sorting, fuzzy search, etc.;
- Pre-loading data, such as pre-loading the content of the next page in a pagination, predicting that the user clicks a button to pre-fetch data;
- To operate server-side data, it is necessary to issue a request for addition, deletion and modification, such as submitting data, deleting data, etc.;
- Synchronize the status of the server, such as polling requests in scenarios where data changes rapidly, and re-pulling data after operating a certain data;
Describes how to handle the request, implemented as a method instance in alova
.
- Placeholder request, displaying loading, skeleton diagram, or the last real data used when requesting;
- Cache high-frequency responses, and execute requests multiple times will use fresh data;
- Multi-request serial and parallel;
- Anti-shake for frequent requests, avoid front-end data flashing, and reduce server pressure;
- Important interface retry mechanism to reduce the probability of request failure caused by network instability;
- Silent submit, when you only care about submitting data, directly respond to the success event after submitting the request, and the background ensures that the request is successful;
- Offline submit, temporarily store the submitted data locally when offline, and submit it after network connection;
Indicates that the request is sent with the request parameters, and the response is obtained. alova
can cooperate with any request library or native solution such as axios
, fetch
, XMLHttpRequest
.
alova
will state and manage the response data in a unified manner. The response data can be operated at any location, and the corresponding views can be automatically updated by using the characteristics of the MVVM library.
- Remove the cached response data and pull it from the server when the request is made again;
- Update cache response data, which can update response data at any location, which is very beneficial to update data across pages;
- Refresh the response data, which can re-refresh the response data at any location, and is also very beneficial to update data across pages;
- Custom setting cache, when requesting batch data, you can manually set the cache for batch data one by one, so as to satisfy the cache hit of subsequent single data;
# use npm
npm install alova --save
# use yarn
yarn add alova
Resources | Description |
---|---|
@alova/mock | Mock request adapter for alova.js |
@alova/scene-react | react request strategy library for alova.js |
@alova/scene-vue | vue request strategy library for alova.js |
@alova/scene-svelte | svelte request strategy library for alova.js |
@alova/adapter-uniapp | uniapp adapter for alova.js |
@alova/adapter-taro | taro adapter for alova.js |
@alova/adapter-axios | axios adapter for alova.js |
@alova/adapter-xhr | XMLHttpRequest adapter for alova.js |
- β The storage time can be set as a date object, indicating that it expires at a certain point in time
- β You can set the default cache for different request methods globally. The current default is 500 seconds of memory cache for GET requests
- β Additional state management, get and update additional state across pages and modules
- request error log printing
- β Complete offline submission function, you can submit when you are offline, and you can read offline information when you enter again
- β Request middleware design, which can manually control sending requests, status modification, etc.
- β Retry interval, maximum number of retries, etc. when silent submission fails
- β Request to share
- Server-side rendering support
- Performance improvements
- β Adapters for each operating environment (Uniapp, Taro)
- Develop extended hooks under different request scenarios through alova/scene library, providing out-of-the-box high-performance and high-experience functions [Refer to usePagination ]
Please make sure to read the Contributing Guide before making a pull request.
If you encounter difficulties when using alova, whether it is a bug, or an unmet feature, you can submit an issue.