Axios vs. Alova

A new challenger library for API calls

Axios. This concept has been in use for a decade now. Axios is a simple promise-based HTTP client for the browser, with over 44.3 million weekly downloads.

Let’s go back a bit in history. Before Axios became hit, there were HTTP clients that used callback-based. Callback-based HTTP clients required developers to manually manage the flow of asynchronous operations. Which often led to nested and complex code structures known as “callback hell.”

Axios resolved this manual management issue when it was introduced and quickly became popular. However, over time, Axios began to lag in efficiency and performance.

Another library called "Alova" challenged this lag. Alova is a lightweight request strategy library introduced last year and has had 1,000 weekly downloads to date.

You might be wondering how Alova is challenging Axios. Axios has double-digit million downloads, while Alova only has a thousand.

Let's take a closer look and get a better understanding.

1. Axios has separate libraries for React and Vue

Today, UI frameworks such as React and Vue are extensively used. However, Axios is not tightly integrated with these frameworks. This means that it must be maintained separately, which can impact efficiency.

While using Axios, one is comfortable importing the library and starting to use it. However, Alova provides a lighter alternative in terms of efficiency, library weight, and ease of use.

2. Inflated Bundle

When referring to "bundle phobia", we came across the compressed state of the two bundles.

Axios weighs in at around 11+ kB, while Alova comes in at 4.8 kB, resulting in a difference of approximately 2.3 times between the two in file size. Also, Axios depends on three libraries under the hood, while Alova does not depend on any till date.

3. Performance Traffic

Axios does nothing to handle frequent and identical requests as the number of requests across applications increases to keep a web page running. Alova emphasizes making requests shareable and cachable.
If two users send the same request, such as a details page from a listing page for an itinerary, Alova can reduce the multiplexing of the requests by using the share method.

import Alova from 'alova';
const client = new Alova({ share: true });
const request = client.get(‘https://api.example.com/users');
client.share(request, [‘user1’, ‘user2’]);

In the case that one is concerned about data privacy, it can be ensured that Alova does not make copies of requests and send them to other resources.

4. Caching Requests

With Axios, there was no built-in caching of requests. It could have been maintained with other libraries, depending on the framework used. However, Alova takes a step further by caching the response in a temporary storage area.

In Alova, the memory cache is enabled by default. When the memory cache is enabled, Alova will store the response data for a request in memory. If the same request is made again, Alova will return the response data from memory instead of making a new request to the server.

The size of the cache can be controlled by setting the cacheSize property in the Alova client.

const client = new Alova({
   cache: true,
   cacheSize: 1000,
 });

When the memory cache reaches its maximum size, Alova will start to evict data from the cache that has not been used for the longest period of time.

5. Fetch Data Syntax

Axios requires a few more lines of code for data fetching than Alova provided us. Let's check this with a simple GET query.

//Axios
 import axios from ‘axios’;
 const requestData = () => {
   loading.value = true;
   axios.get(‘http://xxx/index').then(result => {
       data.value = result;
     }).catch(e => {
         error.value = e;
     }).finally(() => {
         loading.value = false;
   });
 }
 onMounted(requestData);

// Alova
 import { createAlova, useRequest } from ‘alova’;
 const pageData = createAlova({ baseURL: ‘http://xxx' }).Get(‘/index’);
 const { loading, data, error } = useRequest(pageData);

6. Practiced API Design

Alova's request information structure is almost identical to that of Axios, making it more adaptable.

// axios
 axios.get(‘/index’, {
   headers: {
     ‘Content-Type’: ‘application/json’
   },
   params: {
     userId: 1
   }
 });

// alova
 const todoListGetter = alovaInstance.Get(‘/index’, {
   headers: {
     ‘Content-Type’: ‘application/json’
   },
   params: {
     userId: 1
   }
 });

7. Request Paging Tactic

As the label suggests, it works by dividing the data into pages. Each page contains a fixed number of records.

With Axios, we needed to make a request each time we jumped between pages unless we used a third-party library or language feature. However, Alova solves this problem with request-paging.

When a request is made with Alova, it returns the records of the first page. It will also return a property named "next" in the response.

The next the property contains the URL of the next data page. You can use it to make subsequent requests to Alova. The next data page will be preloaded, so there is no need to wait when turning to the next page.

The response object would look like this:

response = {
   statusCode: 200,
   message: “Successfully fetched data.”,
   body: { … },
   next: “……../page_2”,
   …
}

We cache the request by loading it if it has the "next" property in the response with the URL for the following data fetch.

8. Request Strategy

The requestStrategyproperty in Alova allows you to specify the strategy Alova should use to make the request. The following are the available request strategies:

• default — This is the default strategy. Alova will use the most efficient strategy for the given request.
• streaming — This strategy allows you to stream the response data as it is received from the server. This can be useful for large responses, as it allows you to process the data without having to store it all in memory.
• polling — This strategy makes repeated requests to the server until the response is received. This can be useful for requests that are expected to take a long time to complete, as it allows you to keep track of the progress of the request.

Conclusion

Axios is a popular HTTP client library that has been around for many years. It is a versatile library that can be used for a variety of tasks. However, Axios has some limitations, such as its large file size and the lack of built-in caching.

Alova is a newer HTTP client library designed to address some of the limitations of Axios. Alova is smaller, faster, and more efficient than Axios. It also has built-in caching and requests paging support.

In conclusion, Alova is a good choice for developers looking for a lightweight, efficient, and feature-rich HTTP client library.

References

• Bundle-Phobia
• NpmJs
• AlovaJs