DEV Community: Scott Hu

30 months of open source: How I maintain the Next-Gen request tool

Scott Hu — Tue, 03 Sep 2024 09:13:46 +0000

Two years ago, I designed and developed a JavaScript request strategy library called alovajs. Since its promotion in April 2023, it has received acclaim from developers around the world and has garnered over 2700+ stars, including recognition from experts at major companies.

Currently, alova@3.x has been released, positioned as "the next-generation request tool for streamlined workflows."

I have been maintaining it without compensation for 30 months, and the version has reached 3.x. During this period, through continuous reflection, rejection, and rethinking, I aimed to achieve something that other request tools have not done, to become a tool that can truly help front-end development. I believe I have found a reliable direction.

That is, to create a "next-generation request tool for streamlined workflows", maximizing the assistance to front-end development in streamlining the API integration process.

Below is the exploration story of alovajs, which is also the story of an open-source project from its inception.

If you are interested in alovajs, I sincerely invite you to join the community and make progress together.

Join the Discord community

alovajs Originated from a Small Project, but Its Mission is to Sail the Ocean

One day in March 2022, due to certain circumstances, I conceived the idea of developing an App called "Con of goal." Inspired by some apps, I hoped that "Con of goal" could achieve delay-free data requests and submissions, that is, an immediate response mode, even under weak or no network conditions. However, after searching online and not finding a suitable solution, and similar optimistic update solutions not meeting the needs, my damn desire to share led me to decide to implement it in the form of a request library, which was the starting point of alovajs, but it didn't have a name at that time.

Designing alovajs

The beginning of a library is not design, not development, but clarifying the needs

pro Tips: It is strongly recommended that you first briefly understand the overview section of alovajs to better understand the following content.

At that time, there was no product positioning, just creating a JavaScript library to meet my own needs. I studied existing request libraries and listed the following needs:

Support for seamless data interaction mode, that is, under network disconnection, it can still be submitted without delay, without the user's perception
Designed according to the popular useHook of the time, making the interface more user-friendly
A set of code supports multiple frameworks such as Vue, React, etc., and JavaScript operating environments such as browsers, React Native, UniApp, and Taro, etc.
Consistent usage in multiple JavaScript environments
Considering the caching function of react-query is very good, this should also be added
Due to the influence and simplicity of axios, make alovajs easy to get started with, and the design should be similar to axios

Then, based on the needs, the library's API was designed.

For needs 1, it was the starting point for me to do alovajs, but it was not simple. The design at the time was to add a silent parameter in the useHook configuration, which could immediately respond to the success callback, but it was later proven to be problematic and redesigned, which is now the seamless data interaction strategy

For needs 2, three core useHooks were designed: useRequest, useWatcher, and useFetcher. This is very familiar to everyone, such as ahooks' useRequest, vueuse's useAsyncState, react-query, and swr, needless to say, it is indeed very convenient.
Since the useHook design is used, different frameworks will have different state management, but I don't want to create a JavaScript library for each framework like react-query. Therefore, for needs 3, the specifications for stateHook adapters, request adapters, and storage adapters were designed, and different adapters can be written according to the specifications, separating the framework environment and runtime environment-related logic into separate modules.
For needs 4, the method instance proxy pattern was designed, and the method instance proxy calls the hook functions of different adapters, so that even if you develop any application, you can get started with alovajs without any unfamiliarity, and it can also be seamlessly transplanted.
For needs 5, similar JavaScript libraries implement caching in the form of custom keys, but my idea is to focus on request information. The common scenario is that when requesting the same interface with the same request method and parameters, it is necessary to hit the response data of the last time. Why don't we use these request information as caching keys? Therefore, alovajs has designed an automatic caching mechanism, which is enabled by default on GET requests.
For needs 6, refer to and learn from axios.

These designs have indeed been proven over time. alovajs has perfectly compatible with Vue, React, Svelte frameworks through the adapter method, and can also run in various JavaScript environments such as browsers, React Native, UniApp, and Taro, while maintaining a consistent usage method, which has given me a glimmer of hope.

In the following months, although alovajs was released, it has not been promoted. On the one hand, it is because I used it in the "Con of goal" project. Although it has been tempered and improved in this project, it is still very incomplete, and the positioning is not clear. The initial version introduction is like this.

Later, the "Con of goal" project was aborted, but alovajs is still persisting.

alovajs' Direction Exploration

With the obsession of once being an Internet product manager, I still hope to make alovajs a differentiated product. I often ask myself, what is the difference between alovajs and other request libraries? Why should users use alovajs? It is indeed different from other libraries in design, which is not a question that can be answered immediately. Later, I tried to position the direction of the request library as a "lightweight request library" and a "multi-end unified request library", but they were all denied by myself, because these cannot bring substantial help to developers, and they cannot be called advantages.

In September 2022, an opportunity made me discover the excellent request library based on Vue, vue-request. Its usePagination and useLoadMore immediately inspired me. This form of pagination implementation made me realize that this is also what I want. At the same time, it made me realize the power of useHook. I can divide the module according to the request scenario, use different useHooks for different scenarios, and the previously implemented seamless data interaction is actually one of the scenarios. If this is the direction, developers can choose different useHooks according to different request scenarios, which not only improves development efficiency and reduces coding complexity, but also prevents junior front-end from writing inefficient code, and can make better use of the core features of alovajs to achieve better performance and less server pressure. request features, so far, the "lightweight request strategy library" was chosen by me.

Then, in order to guide the future design direction of alovajs, I also refined and abstracted the request scenario model (RSM) of alovajs, mainly divided into the following four processes:

Request timing -> Request behavior -> Request event -> Response processing

Let's do it, I started to reconstruct alovajs 2.0 according to this positioning, separated the seamless data interaction function from 1.0, and designed a middleware mechanism to adapt to the development of more request scenario strategy useHooks, studied and developed the pagination strategy and seamless data interaction strategy.

The pagination strategy of alovajs is what I think is the most useful usePagination. It uses the caching function of alovajs to achieve pre-loading of front and back page data, pagination data search, request-level debouncing, and provides automated management of new editing and deletion functions, as well as refreshing the data of a specified page code without resetting.
The seamless data interaction strategy took me 4 months, constantly encountering dead ends, and constantly redesigning the result. It has achieved a strategy that allows users to interact with data without delay even in weak or disconnected network environments, and it can also more stably ensure the success of the request. I designed a virtual data thing, which can be used as a placeholder for response data before the response, making users feel that it is an immediate response, and then replace the virtual data with real data after the response is successful. According to the current exploration results, its usage scenarios can be editor-like applications, system setting modules, and some simpler lists.

Later, request strategy modules such as useForm, useAutoRequest, and useSSE were also added, but this is far from enough.

The idea of the Next-Generation Request Tool

On May 13, 2023, I received such an issue on github

At first, I didn't pay much attention to this issue, just simply understood the function of automatically generating request code for openAPI, and thought it was very good, but due to limited energy, I didn't think deeply about it, and I hadn't been thinking about the direction of alovajs at that time. But recently, I would occasionally think about the direction of alovajs, and this issue that is still open has always come to my mind, and then quietly changed the label of this issue from "feature-request" to "feature-request:confirmed".

At the same time, this issue made me realize that alovajs can also narrow the collaboration distance between front-end and back-end, and further simplify the front-end development workflow. This is the development direction I set for alovajs 3.0:

alovajs will help developers simplify the API integration workflow to the greatest extent, you only need to specify which API to use (this is also the result of thinking for 3 months)

My specific plan is as follows:

The steps 1, 2, 3, 4, 6 in the above figure are solved by automatically generating API code, but our generation plan will go further compared to tools like openapi-generator. It will automatically generate complete ts type, complete description request functions, whether it is a js project or a ts project, there is no need to introduce, let developers call as convenient as directly calling location.reload, and the request function can directly see the complete description and request parameter type prompts.
Since the automatically generated request functions have complete descriptions and type prompts, the vscode plugin completes the interactive way to quickly retrieve the required APIs, and you no longer need to refer to the API documentation.
Solve the problem of the front-end and back-end collaboration gap, and any changes in the interface can be automatically notified to the front-end. If there are changes found during the project construction, an error will be thrown to stop the construction. If it is a ts project, an error will also be thrown during compilation, and the change records can also be viewed through the vscode plugin.

Here is the demo video of vscode extension.

How to solve step 6 "write complex request logic"? Of course, it is to use the request strategy module, which has the characteristics of high performance and scene-based, and users can use a very small amount of code to implement various scene request functions.

In March 2024, the development plan for alova@3.0 was formulated, and it took 4 months to restructure almost the entire project with core member MeetinaXD, and there are many optimizations:

The underlying architecture was redesigned, and a set of hooks can be used simultaneously in Vue, React, Svelte, and even in the Vue options style.
The available range has been increased to the server side. You can use alova in server-side frameworks such as express, koa, and nestjs, and new server-side request strategy server hooks have been added.
10 configurations in alova@2.x were deprecated, and 9 designs were optimized.

In addition, the most important part of 3.0, the vscode plugin, which is in charge of our core member czlin, is also available, and it has basically achieved the goals we set at the beginning.

So far, alova@3.0 has passed the beta period and can be stably used in the production environment.

Only by continuous exploration can we become better

At that time, an article that was criticized, It's time to replace your axios made it to the hot search.

It was indeed not that good when it was just launched, but I know that every product is not achieved overnight, and it needs time to precipitate.

The Apple 1 computer didn't even have a case at the beginning

The development journey of Vue is also a process of continuous exploration and progress

I am just moved by such a product journey, and persisting in doing one thing is the easiest way to succeed. Good products need to be tested for several years, let alone alovajs, which has only been around for about 1.5 years, and has only been contacted by some people for 8 months. During this period, it has also been exploring better solutions and moving forward step by step.

alovajs initially designed useHooks including useRequest, useWatcher, useEffectWatcher, useManual, useController, and then gradually reduced to only three core hooks: useRequest, useWatcher, and useFetcher.

Commit address

In the design of parallel requests, whether to implement a form similar to Promise.all, or the current form of binding to the onSuccess function, I have been entangled in several versions, changed back and forth, and the following is the design of the abandoned responder of that year.

Commit record not found

In order to be compatible with asynchronous caching schemes such as IndexedDB, I initially tried to design the storage adapter as an asynchronous function, but it would bring a series of problems, and then tried to implement the event mechanism through StorageConnector, which is still not perfect enough, and finally to the current custom localCache asynchronous function mechanism.

Commit address

I also thank friends who have supported and contributed to alovajs. The following are a few screenshots, and there are many contributions that are not included.

And continuously supplement the details of the document and improve the best practices, boldly try the cache version plan for the cache recovery mode, and in order to provide complete ts type prompts for alovajs, try to use automatic type inference to reduce the trouble of developers defining types, and indeed spend a lot of effort to optimize and compatible with different UI frameworks, etc.

Among them, the document has been greatly changed two to three times. I am grateful to @Orange Peel for providing the first document modification opinion, and @Well for providing the second document modification opinion, and then our document has such a reputation.

@green tree helped me open up new ideas for alova.

Many things are no longer clear, and the records on npmjs tell me that 146 versions have been released.

There are also many people on github who have raised bugs, and I have also responded and fixed them in the first time. I am really very grateful. If I can't judge the problem immediately, I will also reproduce it on codesandbox, and use this demo as a bridge for communication with users.

The END

Thank you very much for your reading🤗, no matter how difficult it is, the road still needs to continue.

If you recognize alovajs, please go to Github to give it a star.

If you want to understand alova, you can visit the official website, where you can find more detailed documentation and example code to help you better understand and use this tool.

If you have any questions, you can join the following group chats for consultation, or you can also post Discussions in the github repository. If you encounter problems, please submit them in github issues, and we will solve them in the fastest time.

Join the Discord community

We also welcome you to contribute your strength, please go to the Contribution Guide.

react-query swrjs alova In-Depth Comparison

Scott Hu — Sat, 31 Aug 2024 08:03:29 +0000

As our projects become increasingly complex, users are demanding higher speed and better user experiences. Relying solely on traditional request libraries like Axios or Fetch to handle data requests often results in a lot of redundant boilerplate code, which has long been criticized. This is where enhanced request libraries come into play.

Some of you might be wondering, "What exactly is an enhanced request library?" An enhanced request library typically builds on top of traditional request libraries and integrates deeply with UI frameworks like React and Vue through hooks. It also provides additional performance optimization features, such as response caching, to help reduce boilerplate code and improve request performance.

Currently, some of the most popular enhanced request libraries include @tanstack/react-query, swr, and the rising star alova. Each has its unique features. Here, we'll take a deep dive into comparing them to help you determine which one best suits your project's needs. That way, when a new project requirement arises, you'll know exactly which tool to choose.

Quick channel for comparison tools

Let's start right now and compare them from the following 8 perspectives.

Product positioning and features
hooks
Framework support
Server support
Request method
Cache strategy
API automation solution
Performance

Comparison of Positioning and Features

First, let's discuss their different positioning.

@tanstack/react-query primarily focuses on managing asynchronous state. Its strength lies in helping you handle data fetching, caching, and synchronization. When you need data, it fetches it for you; when the data becomes stale, it updates it.

swr also focuses on asynchronous state management, using lightweight hooks to simplify data fetching.

alova provides a comprehensive request solution, mainly to help developers raise API integration efficiency. It reduces the number of steps for developers to use API from 7 to just 1, helping developers reduce a lot of API maintenance time.

Different positioning means these libraries have different design considerations. react-query and swr focus mainly on the hooks they provide and cache management functions. In contrast, alova optimizes API consumption efficiency by taking a more holistic approach to the request strategy. It not only offers hooks but also includes hook middleware, global seamless refresh interceptors, and other features referred to as request strategies. It also provides automatic API generation and search extension plugins. Because of this, I believe alova addresses API-related challenges in multiple aspects.

Let's look at a comparative example in React.

react-query



import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => fetch('https://api.example.com/users')
    .then(res => res.json());
function UserList() {
  const { data: users, isLoading, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

swr



import useSWR from 'swr';

const fetcher = url => fetch(url)
    .then(res => res.json());

function UserList() {
  const { data: users, error } = useSWR('https://api.example.com/users', fetcher);

  if (!users) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

alova



import { createAlova, useRequest } from 'alova';
import adapterFetch from 'alova/fetch';
import ReactHook from 'alova/react';

const alovaInstance = createAlova({
  baseURL: 'https://api.example.com',
  statesHook: ReactHook,
  requestAdapter: adapterFetch(),
});

function UserList() {
  const methodInstance = alovaInstance.Get('/users');
  const { loading, data: users, error } = useRequest(methodInstance);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

You can see. react-queryandswrsend requests directly with asynchronous functions, whilealovaneeds to create a request instance in advance, which defines how to send requests using the fetch adapter under react. In addition, adapters such asxmlhttprequestandaxios are also provided. These are all due to their positioning-dominated design concepts, and these differences will be reflected in the following comparisons.

Comparison of hooks

Number of hooks

@tanstack/react-query provides hooks such as useQuery, useMutation, and useInfiniteQuery.
swr mainly provides hooks such as useSWR and useSWRInfinite.
alova provides a total of 15+ request strategies in different request scenarios, including useRequest, useWatcher, usePagination, useFetcher, useForm, etc.

hook actions

One of the features of alova's hooks is that its scenario-based hooks also provide a wealth of actions, which allow developers to more finely control data operations and quickly implement the comprehensive functionality of different complex requests, which is not available in react-query and swr. For example, the following is actions for paging request.



import { usePagination, useForm } from "alova/client";

// Pagination request example
const {
  loading,
  data,
  page,
  pageSize,
  pageCount,
  total,
  insert,
  remove,
  replace,
  refresh,
  reload,
} = usePagination((page, pageSize) => getUserList({ page, pageSize }), {
  initialPage: 1,
  initialPageSize: 10,
});

// Use actions
const handleAddUser = (newUser) => {
  insert(newUser);
};
const handleRemoveUser = (userId) => {
  remove((user) => user.id === userId);
};

hooks middleware support

alova and swr's hooks support middleware, allowing more fine-grained customization during the request process. But react-query does not support it.

swr



function myMiddleware (useSWRNext) {
return (key, fetcher, config) => {
// Before hook runs...

// Process the next middleware, or the `useSWR` hook if this is the last one.
const swr = useSWRNext(key, fetcher, config)

// After the hook runs...
return swr
}
}

<SWRConfig value={{ use: [myMiddleware] }}>

// Or...

useSWR(key, fetcher, { use: [myMiddleware] })

alova



import { useRequest } from "alova/client";

// Define a middleware
const loggingMiddleware = async (context, next) => {
  console.log("Request started:", context.config);
  const response = await next();
  console.log("Request ended:", response);
};

// Use middleware in hook
const { loading, data } = useRequest(getUserList, {
  middleware: loggingMiddleware,
});

Framework support

Client

@tanstack/react-query supports mainstream UI frameworks in the form of independent packages, although it was originally designed for React.

react: @tanstack/react-query
vue: @tanstack/vue-query
svelte: @tanstack/svelte-query
angular: @tanstack/angular-query
solid: @tanstack/solid-query

swr only supports react.
alova supports frameworks such as react/vue/svelte with a single package + UI framework adapter, unifying the user experience under each UI framework.

SSR

All three support mainstream SSR frameworks.

Server support

@tanstack/react-query and swr mainly provide clienthooks for client applications. Although they can be used in a server-side rendering (SSR) environment, they cannot be used directly in a non-SSR server-side environment, but they do not provide APIs used in pure server-side environments (such as Express or Koa route handlers).

In contrast, alova not only fully supports server-side programs, but also provides server-side request strategies for the server-side environment. They are called server hooks, which makes it easier and more flexible to control requests on the server side.

The following is an example of sending a verification code with retry:



const { retry, sendCaptcha } = require("alova/server");

app.get("/api/captcha/send", async (req, res) => {
  const email = req.params.email;
  // Create a method instance for sending a verification code
  const captchaMethod = alovaInstance.Post("/api/captcha", {
    email,
    content: "captcha content",
  });

  // Use retry hook to wrap captchaMethod
  const retringMethod = retry(captchaMethod, {
    retry: 3,
    backoff: {
      delay: 2000,
    },
  });
  // Use sendCaptcha hook to wrap retringMethod, and send the request and get the response result through await
  const result = await sendCaptcha(retringMethod, {
    key: email,
  });
});

Request method

@tanstack/react-query and swr provide asynchronous functions to receive request data. Users need to directly use axios or fetch third-party request libraries to obtain data and provide it to @tanstack/react-query and swr. This gives all control of the request to the user, and even simulates the request in the asynchronous function.



const fetchUsers = async () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: "your data" });
    }, 1000);
  });
const { data: users, isLoading, error } = useQuery("users", fetchUsers);

But alova uses Method as a proxy object, which has the following advantages for me:

Provides a unified request method. Users do not need to care about what method is used for request except setting the request adapter.
It has various uses. Users can use Method to send requests directly like axios, and can also directly pass it into hooks to control requests.



// Direct request
const res = await alvoaInstance.Get("/users");

// Pass in request in useRequest
const { loading, data, error } = useRequest(alvoaInstance.Get("/users"));

For example, using XMLHttpRequest request can also get a complete and unified experience, including global interceptors. Alova provides XMLHttpRequest adapter, but it needs to be encapsulated in @tanstack/react-query and swr.
Easy to port to other projects, just change the request interceptor globally.

Cache strategy

@tanstack/react-query

Fine cache control: @tanstack/react-query allows to configure staleTime and cacheTime to determine the cache duration and expiration time of data.
Automatic refresh and invalidation: Configure automatic refresh of data under certain conditions through options such as refetchOnWindowFocus and refetchOnReconnect.
Cache data persistence: Implement persistent storage of client cache data through the persistQueryClient plugin.
Cache debugging tool: Provides ReactQueryDevtools debugging tool for observing and processing data requests and cache status.

swr

Custom global cache: SWR uses a global cache to share data, and allows customizing how to store cache through the provider option of SWRConfig.
Modify cache data: Provides mutate function to modify the cache, including clearing all cached data or updating specific cache items.
Cache debugging tool: View and debug through browser extensions.

alova

Multi-level cache: Supports L1 and L2 multi-level cache, and can restore data from persistent storage after the memory cache is invalidated to adapt to different usage scenarios.
Fine cache control: Allows you to set different expiration times for different levels of cache, providing more flexible cache management.
Automatic cache invalidation: Automatically invalidate the corresponding cache by specifying the relationship between APIs, reducing the trouble of manual invalidation.
Flexible cache storage: You can use any cache storage to store data, such as localStorage, sessionStorage, indexedDB on the client, AsyncStorage under react-native, and @alova/psc shared by multiple processes on the server, or even redis storage shared by clusters.

API Automation Solution

Since @tanstack/react-query and swr give all control of the request to the user, the API automation solution is provided by third-party request tools. For example, axios and fetch can automatically generate request codes through openapi-generator or @openapitools/openapi-generator-cli.

Alova provides a more advanced openAPI solution. , including the following:

Generate API call code, TypeScript type and detailed API documentation for each API at the same time, so that you can enjoy complete API type hints even in JavaScript projects, which are not available in openapi-generator and @openapitools/openapi-generator-cli.
A brand new API integration experience. In the past, when the backend developer delivered the API to you, you needed to open the intermediate API document to query and copy key information to your project. You needed to constantly switch between the API document and the editor in the middle, but now, Alova's development tools can eliminate the intermediate API document for you, shortening the collaboration distance between the front and back ends like a wormhole. Through it, you can quickly find the required API in the editor and display the complete documentation of this API, and quickly complete parameter transfer by referring to the API parameter table.

Update the API regularly and actively notify the front-end development, no longer relying on the notification of the server-side developer.

Performance

Dependency collection

Dependency collection refers to the automatic tracking of the status of component dependencies within hooks. When the status of the dependency changes, it will trigger the re-rendering of the view. This is more of a way to reduce the rendering of react components.

swr and alova both support dependency collection, while @tanstack/react-query does not.

Alova's unique performance features

Request sharing

Request sharing means that when multiple identical requests are issued at the same time, only one request will be actually issued, and the response data will be shared with these requests. It can not only improve the fluency of the application, but also reduce the pressure on the server.

@tanstack/react-query and swr are not supported, alova is supported on both the client and the server.

hooks performance optimization

Compared with @tanstack/react-query and swr hooks, one feature of alova's scenario-based hooks is that it can optimize performance for specific scenarios, for example:

usePagination can automatically pre-fetch the list data of the previous and next pages, so that users do not need to wait when turning pages (turning pages in seconds)
useForm provides a form draft, and unsubmitted data will not be deleted even if it is refreshed

Default GET cache

Since alova's cache key is automatically calculated through the request information of the method instance, by default, alova's GET has a 5-minute cache, and there is no need to repeat the request when multiple requests for duplicate data are made.

Conclusion

After an in-depth discussion, we have a more comprehensive understanding of the three request enhancement libraries alova, @tanstack/react-query and swr. Each library has its own unique advantages and applicable scenarios. Which library to choose ultimately depends on your project requirements, the team's technology stack, and considerations of performance, ease of use, and flexibility.

swr is known for its simplicity and ease of use. If you are looking for a lightweight and easy-to-use solution, or your project focuses on fast rendering and minimizing server requests, srw will be an ideal choice.
For applications that require powerful state management and caching capabilities, @tanstack/react-query is a good choice.
If you don't want to spend more time on API use, want to find a unified request solution, or are sending requests in Express or koa, alova may be more suitable for your needs.

There is no best library, only the one that best suits your project. Take the time to evaluate and compare different tools, and finally choose the one that can help you and your team work more efficiently and happily.

I hope this article can help you better understand the characteristics of these three request enhancement libraries and make wise choices in actual projects.

Bye everyone!!!

3 months later, I optimized request code generation to the extreme

Scott Hu — Fri, 28 Jun 2024 04:24:53 +0000

Have you ever heard of the automatic request code generation solution? Yes, that's right, it's generated by the openapi specification, and I always feel that something is missing.

After 3 months of research, I have simplified the front-end and back-end collaboration process into one step!

Usually, the front-end and back-end collaboration is a tedious task. Usually we may have such a process:

The back-end notifies the front-end "xxx interface is ready"
First look through the api document to find the newly added api
Go back to your own code and define all new api call functions
If you use TS, you have to add type definitions manually
In different pages, select the corresponding api call function
Introduce the call function
Write complex call logic, such as paging and controlling the page number parameter

We have removed all the 123467 above, and even eliminated the intermediate api document link, allowing you to check and call the api in the editor, which may change your future development method.

Let me explain it in detail.

Automatic generation

Automatically generating API call code according to the openapi specification should be a commonplace, and my solution is to use the VSCode plug-in. Whether you use ESModule, CommonJS or TypeScript, click the generate button in the lower right corner of the editor, it will automatically generate the corresponding standard interface call code and the corresponding response type according to the project type. Whether in js or ts projects, you can experience the complete code prompt function.

dev-to-uploads.s3.amazonaws.com

Generated code Contains the following content:

apiDefinitions.js is used to record the generated api path and request method.
createApis.js uses proxy to dynamically create call functions based on apiDefinitions.js, which can reduce a lot of template code.
globals.d.ts provides complete code prompt function.
index.js is used for user-defined configuration.

This cuts off step 34 in the process.

Then we can also set a timer to check the update status of the openapi file. If there is an update, we will immediately remind you to ensure that you always use the latest api definition. This saves the backend partner from notifying you of api updates, and eliminates step 1 in the process.

Now the process is as follows:

~~The backend notifies the frontend "xxx interface is ready"~~
First look through the api document to find the newly added api
~~Go back to your own code and define all new api call functions~~
~~If you use TS, you have to add type definitions manually~~
In different pages, select the corresponding api call function
Introduce the call function
Write complex call logic, such as paging and controlling the number of pages

Check and use the API in the editor

In order to eliminate step 2, we really racked our brains, so let's just move the api document to the editor and copy the parameters according to the description when you use the interface.

The following is a demonstration of a js project without any additional configuration.

Access the interface through the global Apis, reference src/api/index in the entry file, and then you can directly access it everywhere, which eliminates step 7 again, and the editor's smart prompt displays all the information of the current api.

You can also see the prompts and descriptions of the parameters when filling in the parameters.

The response data prompt is as follows.

Find API through path

What is this? I don't know what the specific reference name is? It doesn't matter, you can also find it by using the API call path:

Find the API by description

Really can't remember anything? Then search using the keywords in the API description:

At this point, steps 2 and 6 are also done:

~~The backend notifies the frontend that "xxx interface is ready"~~
~~First look through the api document to find the newly added api~~
~~Go back to your own code and define all new api call functions~~
~~If you use TS, you have to add type definitions manually~~
In different pages, select the corresponding api call function
~~Introduce calling function~~
Write complex calling logic, for example, paging also needs to control the number of pages

Request strategy modules

How to solve step 7? Of course, encapsulate the calling logic according to different usage scenarios. Although there seem to be many scenarios, let's encapsulate the commonly used ones first, so there are the following encapsulations, which we call "request strategy module" because it is not only encapsulation, but also many performance optimizations.

Here are some simple examples, such as paging request:

const { loading, error, data, page, pageSize, total } = usePagination(
  (page, size) =>
    alova.Get("/api/user/list", {
      params: { page, size },
    })
);

Form submission:

const {
  // Submission status
  loading: submiting,
  // Responsive form data
  form,
  // Submission data function
  send: submit,
} = useForm((formData) => formSubmit(formData), {
  // Initialize form data
  initialForm: {
    name: "",
    cls: "1",
  },
});

Monitor request:

const { loading, data } = useWatcher(
  // State change will trigger this function once
  () => filterTodoList(userId.value),

  // Array of monitored states
  [userId]
);

Now, it is finally simplified to only one step.

~~The backend notifies the frontend that "xxx interface is ready"~~
~~First look through the api document to find the newly added api~~
~~Go back to your own code and define the call function for all new apis~~
~~If you use TS, you have to add type definitions manually~~
In different pages, select the corresponding api call function
~~Introduce the call function~~
~~Write complex call logic, such as paging and controlling the number of pages~~

The last easter eggs

At this point, I believe you have already felt the convenience of this plug-in, right? This is actually a VSCode plug-in tailored for alova!

Our easter egg is that alova has finally ushered in a major upgrade to 3.0, redesigning the underlying architecture and comprehensively refactoring. Now it can be used completely in the client and server. In addition, in order to make it easier to use, this upgrade has abandoned 10 configurations and 9 optimizations. If you think alova is good, please star us on Github.

Visit the official website of alovajs for more details: alovajs official website.

And this plug-in is not just an ordinary development tool, but it maximizes the convenience of alova. Through this plug-in, we have brought the user experience of alova to a whole new level, truly realizing the goal of "as simple as calling a local function".

However, our team is now conducting the final optimization and testing of this plug-in, which will be released in the near future. Good things are always worth waiting for. You are also welcome to tell us your thoughts, complaints or suggestions in the comment area.

If you are an alova user, or are interested in experiencing our project, you can join our WeChat group to get the latest progress at the first time, and you can also communicate directly with the development team and put forward your ideas and suggestions.

Join the Discord

After joining the communication community, you will get:

The latest news about plugins and alova
Exchange usage experience with other developers
Make suggestions or feedback directly to the development team
Possible internal testing opportunities

If you have any questions, you can join the following group chat for consultation, or post Discussions in the github repository. If you encounter any problems, please submit them in github issues, and we will solve them as soon as possible.

You are also welcome to contribute. Please go to the Contribution Guide

The next generation request library alova has received a major upgrade, making it easier to use and higher in performance.

Scott Hu — Fri, 10 May 2024 03:09:26 +0000

hello!

Maybe you have also heard of alova, a lightweight request library, which can help you implement complex data requests at a lower cost, saving developers energy and time.

If you need to learn about alova, you can visit the official website, where you can find more detailed documentation and sample code to help you better understand and use this tool.

It has been a year since the release of alova2.0. During this period, it has received a lot of praise. Of course, it has also received a lot of feedback for improvements, which has made alova continue to mature and improve. I am very grateful to everyone who has contributed to alova, and I also know it. There are many redundancies and flaws in the design.

Now, in order to better serve you, it is time to upgrade to 3.0. The purpose of this upgrade mainly focuses on the following goals:

Adjust alova structure and expand application scope
Simplify usage, discard unnecessary APIs, and adjust defective designs.
Redesign some modules to improve performance

Before looking at the specific 3.0 adjustments, let us review what exactly alova is going to do and where it is going.

Pain points of network requests

In enterprise-level projects involving multi-person collaboration, the cost of Client-Server interaction is relatively high.

High cost of front-end and back-end collaboration:
1. Depends on backend notification: API updates require active notification from the backend
2. API document dependence: The front end needs to consult the API document to obtain information.
3. API code writing: The front-end manually writes the interface code according to the API document.
4. Lack of response data type: API response data does not have type hints by default, which increases the cost of data usage.
5. Increase in bug rate: API changes may lead to an increase in the bug rate of the project.
Complex data interaction logic: Front-end requests are often not that simple. You need to consider when to send requests, when not to send requests, how to process response data, etc. according to different scenarios to meet the performance and performance improvement of the project. This will result in increased developer time costs and code maintenance costs.

solution

IDE plug-in (vscode/webStorm): Solve the problem of front-end and back-end collaboration (specific solutions can be viewed in the Feishu document below)
1. Automatically generate request codes and response data types
2. Embed the api document into the code, you can directly query and insert the API interface in the code
3. Update API information regularly and proactively notify front-end development
4. Interface update records to prevent changes from causing bugs
Request Strategy: Select the corresponding request strategy and implement complex data interaction logic in one line of code.

alova goals

Don't spend time on the small matter of requesting, leave it to alova, it will save you most of the work in requesting, you only need to specify which API to use and what strategy to execute the request. .

alova@3.0 update plan

Release Notes

Before the official version 3.0 is released, we always welcome your feedback. You are welcome to comment in the article or submit your valuable opinions on WeChat from any angle such as usage scenarios and design issues.

The specific update content, progress, and IDE plug-in design can be viewed in alova product white paper and 3.0 update overview.

Join the Discord community to participate in communication

Find core partner people

alovajs has so far achieved certain feasibility verification. In order to speed up its development, it is now necessary to invite two friends who agree with alovajs to join the core team (one has been confirmed) to be responsible for the core work of alovajs. This may allow you to obtain huge benefits. Friends who are willing to learn more see Become a Core Member.

Quickly implement senseless refresh token

Scott Hu — Fri, 19 Jan 2024 05:43:38 +0000

Some time ago, Alova users frequently received feedback on how to implement a senseless token refresh function like Axios. This is indeed troublesome, and I believe everyone has a deep understanding of it.

It really depresses me to have to repeat it every time. So out of anger, I decided to write a universal token authentication module so that alova users would no longer have to worry about this matter.

Using alova's Token authentication interceptor can perfectly solve the following problems for you:

Unify and maintain all codes for token identity authentication, including login, logout, token attachment, token refresh, etc.;
Supports verification of token expiration on the client and server, and refreshes the token without any warning;
Requests that rely on tokens automatically wait for the token refresh to complete before requesting;
Automatically release visitor requests that do not rely on tokens;

The only thing you have to do is configure the role type of the request interface, and then the rest will be automatically taken care of for you.

Some people may not know it. To give a brief introduction, alova is a request strategy library. Its usage is similar to axios, but you can implement complex requests such as request sharing, paging request, form submission, and breakpoint resume by simply configuring parameters. Etc., there is no need to write a lot of code, improve development efficiency, application performance, and reduce server pressure.

The Token identity authentication module is one of alova's request modules. It is completed through a global interceptor and provides client- and server-based identity authentication respectively.

Client-based identity authentication: means judging whether the token has expired from the client, such as the token expiration time obtained during login;
Server-based identity authentication: It indicates whether the token has expired based on the status returned from the server. For example, when status is 401, it means it has expired;

Next, let’s talk about server-based identity authentication as an example.

Install the dependencies first

#vue
npm install alova @alova/scene-vue --save
# react
npm install alova @alova/scene-react --save
#svelte
npm install alova @alova/scene-svelte --save

Implement nonsensical refresh Token on the server side

When the status returned by the server is that the token has expired (for example, 401), it means that the token needs to be refreshed. At this time, requests initiated during the refresh process will also be waiting.

const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
   refreshTokenOnSuccess: {
     // Triggered when responding, the response and method can be obtained, and a boolean is returned to indicate whether the token has expired.
     // When the server returns 401, it means the token has expired.
     isExpired: response => {
       return response.status === 401;
     },

     // Triggered when the token expires, trigger the refresh token in this function
     handler: async (response, method) => {
       const { token, refresh_token } = await refreshToken();
       localStorage.setItem('token', token);
       localStorage.setItem('refresh_token', refresh_token);
     }
   }
});

It will return two interceptor functions, which we can bind to alova's global request interceptor and response interceptor respectively.

import { createServerTokenAuthentication } from '@alova/scene-*';
import { createAlova } from 'alova';

const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
   // ...
});

const alovaInstance = createAlova({
   // ...
   beforeRequest: onAuthRequired(method => {
     // ...interceptor before original request
   }),
   responded: onResponseRefreshToken((response, method) => {
     //...original response success interceptor
     return response.json();
   })
});

Finally, in order to prevent the refreshToken request from being intercepted, it is necessary to identify authRole as refreshToken through metadata.

For more information about metadata, please go to method metadata.

export const refreshToken = () => {
   const method = alovaInstance.Get('/refresh_token');
   method.meta = {
     authRole: 'refreshToken'
   };
   return method;
};

In this way, a complete token silent refresh function is completed

Release visitor request

Some interfaces do not need to rely on token authentication. We call them "guest requests". At this time, we can set their metadata to authRole: null to bypass the front-end interception and allow them to send requests and receive responses smoothly.

export const requestTokenNotRequired = () => {
   const method = alovaInstance.Get('/token_not_required');
   method.meta = {
     authRole: null
   };
   return method;
};

End

In addition, the token authentication request module also provides functions based on client status verification (that is, the front end determines whether the token has expired), login interception, logout interception, etc., making the login authentication function simpler. Documentation of token authentication module is here.

If you have any questions, you can join the following group chat for consultation, or you can publish Discussions in github repository. If you encounter problems, please also post in github issues and we will solve it as soon as possible.

Join the Discord community to participate in communication

You are also welcome to contribute, please go to Contribution Guide.

Refresh token silently in alovajs

Scott Hu — Mon, 18 Dec 2023 06:14:59 +0000

alova is a lightweight request strategy library designed to simplify the management and use of interfaces. By simply configuring parameters, you can implement complex requests such as sharing requests, paging requests, form submissions, breakpoint resumption, etc., without writing a lot of code, improving development efficiency, application performance, and reducing server pressure.

When requesting, we often need to authorize login through token, and refresh the token through refresh_token when the token expires. Here we will discuss how to refresh the token without any sense through alova, that is, automatically refresh the token when the token is found to have expired. At the request initiation point It will not feel that the token has been refreshed.

At present, the token authentication module has been launched. It only requires simple configuration to achieve senseless token refresh. It is recommended to use it directly. View details->

The following are two ideas for implementing a senseless refresh token. Each idea implements the function of the token to wait for other requests during the refresh period.

Determine token expiration on the front end

This is used to determine whether the token has expired at the front end. This is usually used when the token expiration time is returned during login. The idea is to determine whether the token has expired in beforeRequest. If it has expired, refresh the token first and then continue to send the request. Its advantage is A response with an expired token will not be received, so there is no need to send repeated requests.

let token = '', refreshToken = '', tokenRefreshing = false, waitingList = [];
const alovaInstance = createAlova({
   // ...
   beforeRequest: async method => {
     if (getCache('token_expire_time') < Date.now() && method.meta?.authType !== 'refreshToken') { // token expires
       if (tokenRefreshing) {
         // If the token is being refreshed, wait for the refresh to complete before sending a request.
         console.log('Refreshing token, waiting for request');
         await new Promise(resolve => {
           waitingList.push(resolve);
         });
       }

       try {
         tokenRefreshing = true;
         const { refreshToken: newRefreshToken, token: newToken } = await tokenRefresh({ refreshToken });
         //Save the new token and refreshToken
         token = newToken;
         refreshToken = newRefreshToken;

         tokenRefreshing = false;
         // After refreshing the token, notify the requests in the waiting list
         waitingList.forEach(resolve => resolve());
         waitingList = [];
       } catch(error) {
         // If the refresh token fails, you can handle operations such as jumping to the login interface.
         // ...
       }
     }

     method.config.headers.Authorization = token;
   },
})

Here the tokenRefresh request method adds meta data ofauthType = 'refreshToken' as an identifier before the request can pass.

export const tokenRefresh = () => {
   const method = alovaInst.Get('/refresh-token', {
     localCache: null
   });
   method.meta = {
     authType: 'refreshToken'
   };
   return method;
}

Determine token expiration based on the status returned by the server.

This method is to determine whether the token has expired through the return status of the server. This is usually used when the token expiration time is not returned during login. The idea is to determine whether the token has expired by returning the status in responded.onSuccess. If it has expired, refresh the token. The advantage of sending the request again is that it is more accurate, but duplicate requests will also be sent.

let token = '', refreshToken = '';
let tokenRefreshing = false; // Refreshing token, let other requests wait first
let waitingList = [];
const alovaInst = createAlova({
   // ...
   beforeRequest: async ({ url, config, meta }) => {
     console.log(url, 'Requesting');
     // If the token is being refreshed, wait for the refresh to complete before sending a request.
     if (tokenRefreshing && meta?.authType !== 'refreshToken') {
       console.log('Refreshing token, waiting for request');
       await new Promise(resolve => {
         waitingList.push(resolve);
       });
     }
     config.headers.Authorization = token;
   },
   responded: async (response, method) => {
     if (response.status === 401) { // token expires
       console.log(method.url, 'Token expires, get token again');
       try {
           // This prevents requests to refresh the token multiple times, and intercepts and waits for requests sent before the token refresh is completed.
           if (tokenRefreshing) {
             console.log('Refreshing token, waiting for request');
             await new Promise(resolve => {
               waitingList.push(resolve);
             });
           })
         tokenRefreshing = true;
         const { token: newToken, refreshToken: newRefreshToken } = await refreshToken({ refreshToken });
         token = newToken;
         refreshToken = newRefreshToken;

         tokenRefreshing = false;
         waitingList.forEach(resolve => resolve());
         waitingList = [];
         console.log('New token has been obtained and saved', token, `Revisit ${method.url}`);

         // This is because the original interface is re-requested, and superposition with the previous request will result in repeated calls to transformData, so transformData needs to be left empty to remove one call.
         const methodTransformData = method.config.transformData;
         method.config.transformData = undefined;
         const dataResent = await method;
         method.config.transformData = methodTransformData;
         return dataResent;
       } catch(error) {
         // If the refresh token fails, you can handle operations such as jumping to the login interface.
         // ...
       }
     }
     return response.json();
   },
});

So far, Alova's two ideas for refreshing tokens have been implemented, and there is no sense of token refresh at the request initiation point.

If you want to learn more about the usage of alovajs, welcome to alova official website to learn. If you also like alovajs, please contribute a star in Github repository, which is very important to us.

If you think the article is helpful to you, please don't be stingy with your likes and comments. Tell me what you think of alovajs, or ask some questions. I will try my best to answer them. Your support is the biggest motivation for my creation! Hahahahahaha~

Welcome to join our community

Join the Discord community to participate in communication

You are also welcome to contribute, please go to Contribution Guide.

An amazing request tool which perfectly compatible with React, quick tutorial is HERE

Scott Hu — Fri, 01 Dec 2023 10:07:55 +0000

After using alovajs, you only need to select the corresponding useHook to make a request. alova also supports the vue/react/svelte framework. If you also like alovajs, please contribute a star in Github repository, which is very important to us.

This article serves as a basic introduction to react+alova. You can learn the following:

How alova handles frequent requests and fuzzy searches gracefully
How alova helps manage server status under react projects
Smooth use of alova

Welcome to join the communication community

If you have any usage questions, you can join the following group chat for consultation, or you can publish Discussions in github repository. If you encounter problems, please also post in github's issues, we will solve it as soon as possible.

Join the Discord community to participate in communication

You are also welcome to contribute, please go to Contribution Guide.

Install alova

npm install alova --save-dev

Initialize an alova instance

In the following introductory guide, we will use to-dos as an example to explain the needs of obtaining to-do lists for different dates, viewing todo details, and creating, editing, and deleting items!

An alova instance is the starting point from which all requests start. It is written similarly to axios. The following is the simplest way to create an alova instance.

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import ReactHook from 'alova/react';
const alovaInstance = createAlova({
   // Suppose we need to interact with the server of this domain name
   baseURL: 'https://api.todo.com',

   // ReactHook is used to create ref status, including request status loading, response data data, request error object error, etc.
   statesHook: ReactHook,

   //Request adapter, here we use fetch request adapter
   requestAdapter: GlobalFetch(),

   //Set a global request interceptor, similar to axios
   beforeRequest(config) {
     // Suppose we need to add token to the request header
     config.headers.token = 'token';
   },

   //Response interceptor, also similar to axios
   async responded(response, config) => {
     const json = await response.json();
     if (json.code !== 200) {
       // When an error is thrown here, it will enter the request failure interceptor.
       throw new Error(json.message);
     }
     return json.data;
   },
});

todo list - directly use the state managed by `alova` for interface rendering

Our interface in this demo looks like this.

We use useRequest to send the request, which is the most commonly used method when the page obtains initialization data.

const todoListGetter = alovaInstance.Get('/todo/list');
export const TodoList = () => {
     const {
     //Loading is the loading status value. When loading, its value is true, and it is automatically updated to false after the end.
     // It is a Ref type value, you can access it through loading.value, or bind it directly to the interface
     loading,

     // response data
     data: todoList,

     //Request error object, it has a value when requesting an error, otherwise it is undefined
     error,

     //Successful callback binding
     onSuccess,

     // Failure callback binding
     onError,

     //Complete callback binding
     onComplete,

     // Directly pass in the Method object to send the request
   } = useRequest(todoListGetter, {
     //Initial data data
     initialData: [],
   });

   // ###### Callback settings
   onSuccess(todoListRaw => {
     console.log('The request was successful, the response data is:', todoListRaw);
   });
   onError(error => {
     console.log('The request failed, the error message is:', error);
   });
   onComplete(() => {
     console.log('The request is completed, it will be called regardless of success or failure');
   });

   if (loading) {
     return <div>Loading...</div>;
   }
   if (error) {
     return <div class="error">{ error.message }</div>;
   }
   return todoList.map(todo => {
     return (
       <div class="todo">
         <div class="todo-title">{{ todo.title }}</div>
         <div class="todo-time">
             <span class="time">{{ todo.startTime }}</span>
             to
             <span class="time">{{ todo.endTime }}</span>
         </div>
       </div>
     );
   });
}

Todo list page - changed to fuzzy search for todo items

The fuzzy search function is to continuously issue requests during the process of entering keywords. At this time, we replace the above useRequest with useWatcher to automatically re-obtain data when the keyword changes.

In order to improve the user experience and reduce the pressure on the server, we have also implemented search anti-shake.

The implementation code is as follows:

export const TodoList = () => {
   // ...omit duplicate code

   const searchTodo = keyword => alovaInstance.Get(`/todo/list?keyword=${keyword}`);

   // Replace useRequest with useWatcher
   // Monitor keyword changes through useWatcher, and automatically reissue the request after the change
   const [keyword, setKeyword] = useState('');
   const {
     loading,
     error,
     data,
   } = useWatcher(() => searchTodo(keyword), [keyword], {
     debounce: 500, // Set 500 milliseconds request-level anti-shake, no need to implement anti-shake function yourself
   });

   return // ...view code is the same as above
};

In this way, the fuzzy search function with anti-shake is realized.

todo editing page - cache frequently requested data in memory

The edit page looks like this:

Get the edit page data and echo it

Our scenario needs to be considered here. The user clicks on a todo item multiple times within a few seconds to view it. It is a bit wasteful to request the server every time he enters. At this time, we can do a layer of front-end caching to increase the display speed and reduce the pressure on the server. .

const todoDetail = id => alovaInstance.Get(`/todo/${id}`, {
     //Set a local memory cache for 5 minutes, which will become invalid upon refreshing.
     localeCache: 5 * 60 * 1000,
});
export const TodoDetail => ({ id }) => {
   const {
     loading,

     // response data
     data: todoDetail,
     update
   } = useRequest(todoDetail(params.id));

   const handleAddTodo = () => {
     // Continue reading below
   }

   if (loading) {
     return <div>Loading...</div>;
   }
   return (
     <div>
       <input value={todoDetail.title} onInput={e => update({
         data: {
          ...todoDetail,
           title: e.target.value,
         }
       })} />
       <input value={todoDetail.date} onInput={e => update({
         data: {
         ...todoDetail,
           date: e.target.value,
         }
       })} />
       <input value={todoDetail.startTime} onInput={e => update({
         data: {
         ...todoDetail,
           startTime: e.target.value,
         }
       })} />
       <input value={todoDetail.endTime} onInput={e => update({
         data: {
         ...todoDetail,
           endTime: e.target.value,
         }
       })} />
       {/* ... */}
       <button onClick={handleAddTodo}>Submit data</button>
     </div>
   )
}

Data submission code - manually update todo list data

Next, let's take a look at the operation of submitting data. We hope that it will directly update the data of the todo list across components after the submission is successful, instead of requesting data again to refresh the interface.


export const TodoDetail = ({ id }) => {
   // ...
   // First create a new request to submit data, and set immediate to false so that the request will not be sent during initialization.
   const createTodoPoster = newTodo => alova.Post('/todo', newTodo);
   const {
     loading: submitting,
     data,
     error,

     // Manual sender request function, send the request after calling
     send: submitTodo,
   } = useRequest(() => createTodoPoster(todoDetail), {
     // When immediate is false, no request will be issued during initialization
     immediate: false
   });

   // Trigger submission request
   const handleAddTodo = () => {
     submitTodo()
       .then(result => {
         //Update the list data, get the todo list status, and return the updated data
         updateState(todoDetail(params.id), todoListData => {
             const index = todoListData.findIndex(({ id }) => id === params.id);
             todoListData[index] = todoDetail.value;
             return todoListData;
         });
       })
       .catch(error => {
         console.log('Failed to add todo item, error message is:', error);
       });
   };

   return (
     <div>
       {/*... */}
       <button loading={submiting} onClick={handleAddTodo}>Submit data</button>
     </div>
   )
}

End

Now, you can also use alova in the options writing method of vue2, click to view details

There are many runnable examples here

Welcome to join the communication community

Join the Discord community to participate in communication

At the same time, you are welcome to contribute, please go to Contribution Area.

How to customize alova's request adapter

Scott Hu — Thu, 23 Nov 2023 09:46:51 +0000

When using alova to send network requests, we often need to add some information to the request header, such as authentication tokens, public parameters, etc. alova provides two ways to configure request headers at global and individual request granularities. The method of adding request headers is very similar to axios.

Get to know the request adapter

Remember how to create an Alova instance?

const alovaInstance = createAlova({
   // ...
   requestAdapter: GlobalFetch()
});

Yes, requestAdapter is a request adapter. Internal request sending and receiving will rely on the request adapter. GlobalFetch manages requests through the fetch api. In most cases we can use it, but whenWhen alova is running in an environment where the fetch api is not available (such as app, applet), you need to replace a request adapter that supports the current environment.

Write an own request adapter

So how to customize a request adapter? Very simple, it is actually a function. This function will be called every time a request is made, and an object will be returned. This object contains items such as url, method, data, headers, timeout, etc. Request related data collections. Although there are many fields, we only need to access the data we need.

Request adapter structure

The request adapter will receive the request-related parameters and the method instance currently being requested, and return a collection of response-related functions.

function CustomRequestAdapter(requestElements, methodInstance) {
   // send request...
   return {
     async response() {
       // ...return response data
     },
     async headers() {
       // Asynchronous function that returns response headers
     },
     abort() {
       //Interrupt request, this function will be triggered when abort is called externally
     },
     onDownload(updateDownloadProgress) {
       //Download progress information, updateDownloadProgress is continuously called internally to update the download progress.
     },
     onUpload(updateUploadProgress) {
       //Upload progress information, updateUploadProgress is continuously called internally to update the upload progress.
     }
   };
}

Request parameter details

requestElements

Relevant elements of the send request, including the following data.

interface RequestElements {
   //Request url, get parameters are included in it
   readonly url: string;

   // Request type, such as GET, POST, PUT, etc.
   readonly type: MethodType;

   //Request header information, object
   readonly headers: Arg;

   //Request body information
   readonly data?: RequestBody;
}

methodInstance

The method instance of the current request

Return parameter details

response (required)

An asynchronous function that returns the response value, which will be passed to the global response interceptor (responded);

headers (required)

An asynchronous function, the response header object returned by the function will be passed to the transformData conversion hook function of the Method instance;

abort (required)

A common function, which is used for interrupt requests. When the abort function is called in the Manual Interrupt Request chapter, the function that actually triggers the interrupt request is this interrupt function;

onDownload(optional)

A normal function that receives a callback function that updates the download progress. Customize the frequency of progress updates within this function. In this example, it simulates an update every 100 milliseconds. The updateDownloadProgress callback function receives two parameters, the first parameter is the total size, and the second parameter is the downloaded size;

onUpload(optional)

A normal function that receives a callback function that updates the upload progress. Customize the frequency of progress updates within this function. In this example, it simulates an update every 100 milliseconds. The updateUploadProgress callback function receives two parameters, the first parameter is the total size, and the second parameter is the uploaded size;

(Case) XMLHttpRequest request adapter

The following is an example of an adapter that sends requests through XMLHttpRequest. It is mainly used to demonstrate how to write the adapter. The code is incomplete and cannot be run.

function XMLHttpRequestAdapter(requestElements, methodInstance) {
   // Deconstruct the data needed
   const { url, type, data, headers } = config;

   // send request
   const xhr = new XMLHttpRequest();
   xhr.open(type, url);
   for (const key in headers) {
     xhr.setRequestHeader(key, headers[key]);
   }
   const responsePromise = new Promise((resolve, reject) => {
     xhr.addEventListener('load', event => {
       // Process response data
       resolve(/* ... */);
     });
     xhr.addEventListener('error', event => {
       // Handle request errors
       reject(/* ... */);
     });
   });

   xhr.send(JSON.stringify(data));

   return {
     // Asynchronous function that returns response data
     response: () => responsePromise,

     // Asynchronous function that returns response headers
     headers: () => responsePromise.then(() => xhr.getAllResponseHeaders()),
     abort: () => {
       xhr.abort();
     },

     //Download progress information, updateDownloadProgress is continuously called internally to update the download progress.
     onDownload: updateDownloadProgress => {
       xhr.addEventListener('progress', event => {
         //Data receiving progress
         updateDownloadProgress(event.total, event.loaded);
       });
     },

     //Upload progress information, updateUploadProgress is continuously called internally to update the upload progress.
     onUpload: updateUploadProgress => {
       xhr.upload.onprogress = event => {
         updateUploadProgress(event.total, event.loaded);
       };
     }
   };
}

Complete XMLHttpRequest request adapter code click here to view the source code.

End

The above is how to write alova's custom request adapter, which can flexibly handle different request header setting requirements.

Join the Discord community to participate in communication

You are also welcome to contribute, please go to Contribution Guide.

The following is a tutorial for some chapters. If you want to learn more about the usage of alovajs, please come to alova official website to learn.

Transform response of alovajs, a request strategy library

Scott Hu — Wed, 22 Nov 2023 05:46:04 +0000

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

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.
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.

Transform response data

When the response data structure cannot directly meet the front-end requirements, we can set the transformData hook function for the method instance to convert the response data into the required structure, and the data will be used as the value of the data state after conversion.

const todoListGetter = alovaInstance.Get('/todo/list', {
  params: {
    page: 1
  },

  // The function accepts raw data and response header objects, and asks to return the converted data, which will be assigned to the data state.
  // Note: rawData is generally the data filtered by the response interceptor. For the configuration of the response interceptor, please refer to the [Setting the Global Response Interceptor] chapter.
  transformData(rawData, headers) {
    return rawData.list.map(item => {
      return {
        ...item,
        statusText: item.done ? 'completed' : 'in progress'
      };
    });
  }
});

Note:

When used in usehooks, throwing an error in transformData will trigger onError;

When sent a request by method instance, a rejected promise instance will be returned;

special usage of transformData

Since the transformData function has the following two properties:

It will only be triggered when the network request responds, and will not be triggered when the response cache is hit;
Support asynchronous functions;

You can also use it as a hook function for network request response. For example, in the cache scenario where files are used as response data, you can cooperate with IndexedDB to cache file data, and at the same time cooperate with Controlled cache to hit the file cache in IndexedDB.

const fileGetter = alovaInstance.Get('/file/file_name', {
  // Use IndexedDB to cache files
  async transformData(fileBlob) {
    await new Promise((resolve, reject) => {
      const tx = db.transaction(['files'], 'readwrite');
      const putRequest = tx.objectStore('files').put({
        file: fileBlob
      });
      putRequest.onsuccess = resolve;
      putRequest.onerror = reject;
    });
    return fileBlob;
  }
});

(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.

Alova is coming, are you still using axios?

Scott Hu — Wed, 15 Nov 2023 03:49:27 +0000

Hello, I am Scott.

Today, I want to talk something that when we write project code, we should focus more on the implementation of business logic, and hand over the fixed code to the js library or engineering for automatic processing. What I want to say is that the request logic can actually continue simplified.

You may say that using axios or fetch api is enough. There is no request logic. That may be because you are not aware of this problem. As a front-end developer, you must have encountered these problems:

Handle paging logic.
Form processing logic.
Process request debounce logic.
Handle polling checks.
Handle cache handling.
Handle loading status.
Handle error handling.
Captcha sent.
File Upload. -...

These problems, if you are using axios or fetch api, you need to write a lot of code to deal with these problems, but I want to say that they are actually more fixed template codes and can also be streamlined.

Today you can use alova to handle them. alova provides a large number of request modules commonly used in daily business. You only need to simply configure a few lines of code, and alova can automatically help you manage the request status, optimize the network experience, and eliminate those annoying paging logic. , polling check, cache processing, all of which you don’t have to worry about, allowing you to focus more on business logic.

alova’s learning cost is lower

alova draws on the design of axios and ahooks-useRequest, making it easier for everyone to get started and with lower learning costs.

alova official website is here.

If you also like alovajs, please contribute a star in Github repository, which is very important to us.

Let's take a look at how simple configuration can help you solve request problems in various complex scenarios.

Basic request

Basic request, suitable for initialization information, comes with various statuses related to the request.

Take vue3 as an example.

<template>
   <div>
     <div v-if="loading">loading...</div>
     <div v-else-if="error">error: {{ error }}</div>
     <div v-else>
       <div>
         <span>id: {{ data.title }}</span>
         <span>title: {{ data.time }}</span>
       </div>
     </div>
   </div>
</template>

<script setup>
   import { useRequest } from "alova";

   // Parameter style similar to axios
   const todoDetail = alova.Get("/todo", {
     params: {
       id: 1,
     },
   });

   const {
     loading,
     data,
     error,
     onSuccess,
     onError,
     onComplete,
     send,
     abort,
     update,
   } = useRequest(todoDetail);
   onSuccess((event) => {
     console.log("success", event);
   });
   onError((event) => {
     console.log("error", event);
   });
   onComplete((event) => {
     console.log("complete", event);
   });
</script>

useRequest will automatically help you manage loading, data, error and other states, so you don’t need to control it yourself!

useRequest detailed documentation

Status change request

In interactions such as data filtering and search, you can use useWatcher to monitor state changes and send requests. The return value also contains the same state, event function, and operation function as useRequest.

useWatcher(() => filterTodoList(page, keyword), [keyword, page], {
   debounce: [500, 0], // Request-level anti-shake parameters
});

It also has functions such as requesting anti-shake, ensuring request timing, filtering whether to send requests when the status changes, etc., which is super convenient!

useWatcher detailed documentation

Preload data

You can use useFetcher to preload data. There is no need to directly process the response, but the relevant status will be updated:

const { fetching, error, fetch } = useFetcher();
fetch(todoDetail);

useFetcher detailed documentation

Pagination request

In the paging scenario, many states such as page, pageSize, pageCount, total, etc. need to be maintained by yourself, and a lot of logic must be written to determine when a request should be sent!

If you use the paging Hook provided by alovajs, you only need this:

const {
   // loading status
   loading,

   // list data
   data,

   // Is it the last page?
   // When pulling down to load, you can use this parameter to determine whether it still needs to be loaded.
   isLastPage,

   //Current page number, changing this page number will automatically trigger the request
   page,

   //Number of data items per page
   pageSize,

   //Number of pagination pages
   pageCount,

   //Total amount of data
   total,
} = usePagination((page, pageSize) => queryStudents(page, pageSize));

// Turn to the previous page, and the request will be automatically sent after the page value is changed.
const handlePrevPage = () => {
   page.value--;
};

// Turn to the next page, the request will be automatically sent after the page value changes
const handleNextPage = () => {
   page.value++;
};

//Change the number of pages per page. The request will be automatically sent after the pageSize value is changed.
const handleSetPageSize = () => {
   pageSize.value = 20;
};

Isn’t it much cleaner and saves a lot of repeated code?

usePagination detailed documentation

Form submission

Form processing is also a headache, right? alova's useForm directly helps you with form submission, form drafts, automatic reset of form items, multi-page sharing of data, etc.

const {
   form,
   send: submitForm,
   updateForm,
} = useForm((formData) => submitData(formData), {
   initialForm: {
     title: "",
     content: "",
     time: "",
   },
   resetAfterSubmiting: true,
});

useForm detailed documentation

Verification code implementation

Stop making your own countdowns, this is it!

const { loading: sending, send: sendCaptcha } = useCaptcha(
   () => sendCaptcha(mobile),
   {
     initialCountdown: 60,
   }
);

useCaptcha detailed documentation

File upload strategy

A simpler file upload strategy that supports automatic identification and conversion of base64, Blob, ArrayBuffer, and Canvas data. It can also upload multiple files at the same time and generate image previews.

const {
   fileList
   loading,
   progress
} = useUploader(({ file, name }) => uploadFile(file, name), {
   limit: 3,
   accept: ['png', 'jpg', 'gif'],
   imageTempLink: true
});

useUploader detailed documentation

Automatically re-pull data

The latest data can be pulled when the browser tab is switched, the latest data can be pulled when the browser is focused, the latest data can be pulled when the network is reconnected, and the data can be automatically re-pulled by polling request. One or more of the above trigger conditions can be configured at the same time. , you can also configure the throttling time to prevent multiple requests from being triggered in a short period of time. For example, only one trigger is allowed within 1 second.

useAutoRequest(todoDetail, {
   enablePolling: 2000,
   enableVisibility: true,
   enableFocus: true,
   enableNetwork: true,
   throttle: 1000
}

useAutoRequest detailed documentation

Cross-component request strategy

Trigger request-related operations across components or modules, eliminate component-level restrictions, and quickly trigger any requested operation function in any component. For example, you can re-trigger the side menu bar after updating the menu data in a component. request to refresh the data. When the list data is manipulated, a list update is triggered.

// Component A creates a proxy
useRequest(todoDetail, {
   middleware: actionDelegationMiddleware("someAction"),
});

// Trigger operation in component B
accessAction("someAction", (actions) => {
   actions.send();
});

actionDelegationMiddleware detailed documentation

Request retry strategy

Use it on important requests to improve the stability of the request. You can customize whether to retry, the retry delay, and manually stop retrying.

const { onRetry, onFail, stop } = useRetriableRequest(pay, {
   retry(error) {
     return /network timeout/i.test(error.message);
   },
   backoff: {
     delay: 2000,
   },
});

useRetriableRequest detailed documentation

SSE

Requests can be made directly through SSE, which can be automatically transformed through the function transformData of global responses and method instances.data and also provides full control over the EventSource object.

const { readyState, data, eventSource, onMessage, onError, onOpen, on } =
   useSSE(() => chatGPT(), {
     withCredentials: true,
     interceptByGlobalResponded: true,
   });

useSSE detailed documentation

end

Now, you can also use alova in the options writing method of vue2, click to view details

There are many runnable examples here

Welcome to join the communication community

Join the Discord community to participate in communication

At the same time, you are welcome to contribute, please go to Contribution guidelines.

Cache mode of alovajs, a request strategy library

Scott Hu — Fri, 10 Nov 2023 09:33:28 +0000

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

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.
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

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

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

Join our Discord community for discussions

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

Data prefetch of alovajs, a request strategy library

Scott Hu — Thu, 09 Nov 2023 08:42:32 +0000

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

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.
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

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.

Data fetch

When you have the following needs:

Preload the data that will be used in the subsequent process and store it in the cache, so that users no longer wait for the data loading process;
It is convenient to update data across pages (similar to the global state), for example, after modifying an item in the todo list and re-fetching the latest data, the interface will be refreshed after the response.

useFetcher is the hook used to implement the above scenarios. The response data obtained through it cannot be received directly, but the data fetched through it will not only update the cache, but also update the corresponding state, thereby re-rendering the view.

You can use it to pre-fetch data and save it in the cache, or gracefully update the state across components, such as modifying an item in the todo list and re-fetching the latest data, and the interface will be refreshed after the response

the following code is used react.

Update views across modules/components

Next, let's modify a certain todo data, and re-fetch the latest todo list data to update the view.

const getTodoList = currentPage => {
  return alovaInstance.Get('/todo/list', {
    // Note: The name attribute is set here to filter out the required Method instance when the Method instance cannot be specified directly
    // For details, see the subsequent "Method Instance Matcher" chapter
    name: 'todoList',
    params: {
      currentPage,
      pageSize: 10
    }
  });
};

const App = () => {
  const {
    // The fetching attribute is the same as loading, it is true when a fetch request is sent, and it is false after the request ends
    fetching,
    error,
    onSuccess,
    onError,
    onComplete,

    // After calling fetch, a request to fetch data will be sent, and fetch can be called repeatedly to fetch data from different interfaces
    fetch
  } = useFetcher();

  // Trigger the data fetch in the event
  const handleSubmit = () => {
    // Assume the modification of the todo item has been completed...

    // Start to fetch the updated data
    // Situation 1: When you clearly know that the data on the first page of todoList is fetched, pass in a Method instance
    fetch(getTodoList(1));

    // Situation 2: When you only know to fetch the last requested data of todoList, use the Method instance matcher to filter
    fetch({
      name: 'todoList',
      filter: (method, index, ary) => {
        // Return true to specify the Method instance that needs to be fetched
        return index === ary.length - 1;
      }
    });
  };

  return (
    <>
      {/* Render the unified fetch state */}
      {fetching ? <div>Fetching data in the background...</div> : null}
      {/* ... */}
      <button onClick={handleSubmit}>Modify todo items</button>
    </>
  );
};

See Method instance matcher for more usage methods of Method instance matcher

preload data

The following implements the preloading function of the next page of data in the paging scenario of the todo list.

import { useState } from 'react';

// method instance creation function
const getTodoList = currentPage => {
  return alovaInstance.Get('/todo/list', {
    params: {
      currentPage,
      pageSize: 10
    }
  });
};

const App = () => {
  const { fetch } = useFetcher();
  const [currentPage, setCurrentPage] = useState(1);
  const { data, onSuccess } = useWatcher(() => getTodoList(currentPage), [currentPage], {
    immediate: true
  });

  // Pre-fetch the data of the next page when the current page request is successful
  // Realize that there is no need to wait for the request when turning the page to the next page
  onSuccess(() => {
    fetch(getTodoList(currentPage + 1));
  });

  return {
    /* ... */
  };
};

Notes: After the useFetcher request is completed, only the cache is updated, and if it is found that there is still a data state under the Method instance, it will also be updated synchronously, so as to ensure that the page data is consistent. This is useFetcher used to update views across modules/components ensure.

Compare with useRequest and useWatcher

useFetcher does not return the data field, the pre-fetched data will be saved in the cache, and the status data of the corresponding location will be updated;
Rename loading to fetching;
There is no send function, but there is a fetch function, which can be reused to fetch data from different interfaces. At this time, you can use the fetching and error states to render views uniformly, so as to achieve unified processing the goal of;

(End)Why Use Alova

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

Join our Discord community for discussions

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

DEV Community: Scott Hu

30 months of open source: How I maintain the Next-Gen request tool

alovajs Originated from a Small Project, but Its Mission is to Sail the Ocean

Designing alovajs

alovajs' Direction Exploration

The idea of the Next-Generation Request Tool

Only by continuous exploration can we become better

The END

react-query swrjs alova In-Depth Comparison

Comparison of Positioning and Features

react-query

swr

alova

Comparison of hooks

Number of hooks

hook actions

hooks middleware support

swr

alova

Framework support

Client

SSR

Server support

Request method

Cache strategy

@tanstack/react-query

swr

alova

API Automation Solution

Performance

Dependency collection

Alova's unique performance features

Request sharing

hooks performance optimization

Default GET cache

Conclusion

3 months later, I optimized request code generation to the extreme

Automatic generation

Check and use the API in the editor

Find API through path

Find the API by description

Request strategy modules

The last easter eggs

The next generation request library alova has received a major upgrade, making it easier to use and higher in performance.

Pain points of network requests

solution

alova goals

alova@3.0 update plan

Release Notes

Find core partner people

Quickly implement senseless refresh token

Install the dependencies first

Implement nonsensical refresh Token on the server side

Release visitor request

End

Refresh token silently in alovajs

Determine token expiration on the front end

Determine token expiration based on the status returned by the server.

Welcome to join our community

An amazing request tool which perfectly compatible with React, quick tutorial is HERE

Welcome to join the communication community

Install alova

Initialize an alova instance

todo list - directly use the state managed by alova for interface rendering

Todo list page - changed to fuzzy search for todo items

todo editing page - cache frequently requested data in memory

Get the edit page data and echo it

Data submission code - manually update todo list data

End

Welcome to join the communication community

How to customize alova's request adapter

Get to know the request adapter

Write an own request adapter

Request adapter structure

Request parameter details

Return parameter details

(Case) XMLHttpRequest request adapter

End

Transform response of alovajs, a request strategy library

Join Our Community

todo list - directly use the state managed by `alova` for interface rendering