与其他库比较

react-query/swr/alova 对比

react-query 是一个强大的异步状态管理，swr 是一个用于数据请求的 React Hooks 库，它们的共同特性也是使用 use hook 来发送和管理请求，和数据缓存功能，以下是三者的对比表格。

特性 ↓/库 →	react-query	swr	alova
定位	异步状态管理	异步状态管理	提升 API 消费效率
使用模式	hooks 为主	hooks 为主	完整的请求方案
适用环境	client	client	client/server
请求策略	2-3 个 hooks	2-3 个 hooks	hooks/interceptors/middlewares/server hooks 等 20+个
hooks 操作函数	❌	❌	✅
框架支持	多包支持	仅 React	适配器支持
SSR	✅	✅	✅
服务端	❌	❌	nodejs/deno/bun
自由度	🟡 受限	🟡 受限	灵活度高
请求共享	❌	❌	✅
缓存策略	单级缓存	单级缓存	多级缓存
axios 支持	✅	✅	✅
fetch 支持	✅	✅	✅
XMLHttpRequest 支持	🟡 受限	🟡 受限	✅
请求方式	第三方库	第三方库	统一的 Method 代理
插件系统	请求库决定	请求库决定	官方提供
依赖收集（性能）	❌	✅	✅
数据同步	✅	✅	✅

与 axios/fetch/XMLHttpRequest 等传统请求工具对比

axios/fetch/XMLHttpRequest 等传统的请求工具与下一代请求工具 alova 解决的是不同的问题，前者聚焦于请求发送和接收响应，后者用于提升 API 的消费效率，它们是互相补充的关系，将 alova 与传统请求工具组合使用可以获得更强大的请求特性，我们以 axios 为例。

alova 为 axios 提供自动化请求状态管理

仅使用 axios 时，通常需要你自行维护请求相关状态，使用 alova 的 use hook 后可以获得自动化的请求状态管理能力。

仅axios

// vue3代码示例
const loading = ref(false);
const data = ref({});
const error = ref(null);
const request = async () => {
  try {
    loading.value = true;
    data.value = await axios.get('/xxx');
  } catch (e) {
    error.value = e;
  }
  loading.value = false;
};
mounted(request);

axios+alova

// 将axios作为alova的请求适配器
const { loading, data, error } = useRequest(alova.Get('/xxx'));

alova 提供开箱即用的高性能请求策略

alova 为你提供了多个高性能的请求策略模块，你可以根据不同请求场景使用不同的模块，这是 axios 不具备的。

alova 为 axios 提供响应数据缓存

alova 分别提供了 3 种缓存模式来满足不同的缓存场景，分别为内存模式、缓存占位模式、恢复模式。它们是组件无关的，只要请求地址和参数相同都可以命中缓存，除非你关闭了它。响应数据缓存可以极大地提高请求流畅性，降低服务端压力。

alova 为 axios 提供请求共享功能

请求共享在同时发送多个相同请求时，将会复用同一个请求，它也可以提升应用流畅性和降低服务端压力。

alova 为 axios 提供数据预拉取

提前请求将要使用的数据，也可以极大提升应用流畅性。

alova 可管理请求状态

你可以使用 alova 跨任意的组件层级来访问其他组件内的状态化数据，这可以让你减少跨组件通信的一些麻烦。