跳到主要内容
版本：v3

介绍alova

alova 是什么？​

alova（读作/əˈləʊva/

） 是一个流程简化的下一代请求工具，它可以将你的 API 集成工作流从 7 个步骤极致地简化为 1 个步骤，你只需要选择 API 即可使用。

有别于@tanstack/react-request、swrjs、ahooks的useRequest等库，alova通过将fetch/XMLHttpRequest/axios封装成请求适配器，并提供不同的复杂请求场景下的请求策略，来达到更简单和统一的开发体验。

你可以在 为什么创造 alova 中了解背景故事，我们也提供了一份详细的 对比与其他请求库 了解 alova 的差异。

特性​

  • 简单易用，并且学习成本更低。
  • 更先进的 openAPI 解决方案，直接扔掉中间的API文档吧。
  • 搭配客户端技术和请求库，react/vue/svelte/solid/next/nuxt/sveltkit/solid-start/uniapp/taro/... + fetch/XMLHttpRequest/axios/...
  • 搭配服务端技术和请求库，nodejs/deno/bun/... + fetch/XMLHttpRequest/axios/...
  • 15+ 高性能的请求策略应对复杂的请求场景，帮助你快速开发性能更好的应用。

在线体验​

这里为你准备了丰富的示例，帮助你快速体验 alova 的各种功能。

React

Codesandbox

StackBlitz

Vue

Codesandbox

StackBlitz

Svelte

Codesandbox

StackBlitz

Solid

Codesandbox

StackBlitz

Server

Codesandbox

StackBlitz

如何做的？​

alova 提供了完整的应对复杂请求场景的方案，我们称之为请求策略，它们包含客户端请求策略和服务端请求策略。

客户端请求策略​

在客户端，请求策略以 hooks、拦截器和中间件的形式实现，使用不同的请求策略应对不同场景下的请求，它们对每一个请求场景都提供了完整的状态化参数、事件和操作函数，只需一行代码就能快速实现各种复杂的请求逻辑，不仅能帮你提升开发效率，还能帮你提升 App 的运行效率，降低服务端压力。

以下是部分客户端请求策略的介绍和示例，请选择你感兴趣的展开查看。

监听请求策略

监听请求策略用于随数据变化而重新请求的场景，例如模糊搜索、tab 栏切换等。

const {
  // 响应式状态
  loading,
  error,
  data,

  // 事件
  onSuccess,
  onError,
  onComplete,

  // 操作函数
  send,
  update

  // ...
} = useWatcher(
  () =>
    alova.Get('/api/user', {
      params: {
        type: activeTab
      }
    }),
  [activeTab]
);

前往监听请求策略 查看详情。

分页请求策略

分页请求策略帮助你快速实现包含翻页、条件查询、下一页数据预拉取、插入/替换/移除数据项、刷新和重置等完整的分页数据请求场景。

const {
  // 响应式状态
  loading,
  error,
  data,
  page,
  pageSize,
  total,

  // 事件
  onSuccess,
  onFetchSuccess,
  onError,
  onFetchError,

  // 操作函数
  refresh,
  insert,
  replace,
  remove,
  reload,
  send,
  abort,
  update

  // ...
} = usePagination(
  (page, size) =>
    alova.Get('/api/user/list', {
      params: { page, size }
    }),
  {
    preloadNextPage: true,
    watchingStates: [username, sex],
    debounce: 500
  }
);

前往分页请求策略 查看详情。

Token身份认证策略

Token 身份认证策略提供全局的拦截器，它可以帮你统一维护 Token 身份认证的所有代码，包括登录、登出、token 附带、token 刷新等，并支持无感刷新 token。

const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
  refreshTokenOnError: {
    isExpired: res => res.status === 401,
    refrshTokenOnError: async () => {
      const { token, refresh_token } = await refreshToken();
      localStorage.setItem('token', token);
      localStorage.setItem('refresh_token', refresh_token);
    }
  }
});
const alovaInstance = createAlova({
  beforeRequest: onAuthRequired(),
  responded: onResponseRefreshToken()
});

前往Token 认证拦截器 查看详情。

表单提交策略

通过表单提交策略，你可以快速实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能。

const {
  // 响应式状态
  loading: submiting,
  error,
  form,

  // 事件
  onSuccess,
  onError,
  onComplete,

  // 操作函数
  send: submit,
  updateForm,
  abort

  // ...
} = useForm(formData => alova.Post('/user/profile', formData), {
  initialForm: {
    name: '',
    age: '',
    avatar: null
  },
  resetAfterSubmiting: true,
  store: true
});

前往表单提交策略 查看详情。

数据拉取策略

提前拉取数据必要的数据，用户不再需要等待数据加载的过程，从而提升用户体验。

const {
  // 响应式状态
  loading,
  error,

  // 事件
  onSuccess,
  onError,
  onComplete,

  // 操作函数
  fetch,
  update,
  abort

  // ...
} = useFetcher();

const handleItemClick = itemId => {
  fetch(
    alova.Get('/api/user/detail', {
      params: {
        id: itemId
      }
    })
  );
};

前往数据预拉取 查看详情。

无感数据交互策略

无感数据交互是指用户在与应用进行交互时，无需等待即可立即展示相关内容，或者提交信息时也无需等待即可展示操作结果，就像和本地数据交互一样，从而大幅提升应用的流畅性，它让用户感知不到数据传输带来的卡顿。

const {
  // 响应式状态
  data,
  loading,
  error,

  // 事件
  onSuccess,
  onError,
  onComplete,
  onBeforePushQueue,
  onPushedQueue,
  onFallback,

  // 操作函数
  send: submit,
  abort,
  update

  // ...
} = useSQRequest(() => alova.Get('/api/todo/add'), {
  behavior: 'silent',
  queue: 'queue-demo',
  silentDefaultResponse: () => {
    return {
      id: '--'
    };
  }
});

前往无感数据交互 查看详情。

跨组件请求触发中间件

跨组件请求触发中间件可以帮你消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数。

useRequest(alova.Get('/api/todo/list'), {
  // ...
  middleware: actionDelegationMiddleware('action:todoList')
});

前往跨组件触发请求 查看详情。

验证码策略

快速实现验证码发送。

const mobile = ref('');
const {
  // 响应式状态
  loading: sending,
  countdown,
  error,

  // 事件
  onSuccess,
  onError,
  onComplete,

  // 操作函数
  send,
  abort,
  update

  // ...
} = useCaptcha(
  () =>
    alova.Post('/api/captcha', {
      mobile: mobile
    }),
  {
    initialCountdown: 60
  }
);

前往验证码策略 查看详情。

请前往 请求策略列表 查看全部客户端请求策略。

服务端请求策略​

在服务端中例如nodejs/deno/bun，alova还提供了服务端的请求策略，称之为 server hooks，它们都支持集群模式。

以下是部分server hooks的介绍和示例，请选择你感兴趣的展开查看。

请求重试策略

请求失败时重新发起请求。

const response = await retry(alova.Get('/api/user'), {
  retry: 5
});

前往请求重试策略 查看详情。

请求速率限制策略

限制在一定时间的请求次数，支持集群模式。

const limit = createRateLimiter({
  points: 4,
  duration: 60 * 1000
});
const orderRes = await limit(alova.Get('/api/order'));

前往请求速率限制策略 查看详情。

更先进的 openAPI 解决方案​

  1. alova 的开发工具能够同时生成 API 调用代码，以及每个 API 的 TypeScript 类型和详尽的 API 文档，即使在 JavaScript 项目中也能享受到完整的 API 类型提示。
  1. 在过去，当后端开发者交付 API 给你后，你需要先打开中间的 API 文档查询并复制关键信息到你的项目里，你需要不断地在中间的 API 文档与编辑器切换，但现在，alova 的开发工具可以为你消除中间的 API 文档，像虫洞一样拉近前后端的协作距离。通过它你可以在编辑器中快速查找所需的 API 并展示这个 API 的完整文档，参照 API 参数表快速完成参数传递，让你感受不一样的 API 集成体验。

关于 alova 开发工具的详细介绍，请参考 集成编辑器扩展。

构建 Client-Server 交互层​

通过 alova 的各种特性，你还可以为你的项目构建 Client-Server 交互层（CS 交互层），CS 交互层将会以合并相同请求的方式分发响应数据到各个组件中，此外，CS 交互层还管理响应数据和 useHooks 所创建的响应式状态，你可以在任意的 UI 组件中访问和修改 CS 交互层的数据，以及刷新 CS 交互层数据。

如果你想要构建 CS 交互层，请参考构建 Client-Server 交互层

在任何 JS 环境下运行​

alova 的灵活性非常高，你可以在以下任意的 JS 环境下，配合不同的请求工具使用（灰色部分将在未来逐渐支持）。

Vue3ReactSvelteVue optionsNextNuxt logoNuxtnodejsbundenoSveltekitSolidMini program🇨🇳uniappTaroAngularPreactQwikLitStencil
Fetch ApiAxiosXMLHttpRequestGraphQLSuperAgent

迁移指南​

项目推荐​

Naive Admin
开箱即用的中后台框架/简化您的中后台开发
Uniapp 脚手架 - unibest
集成了最新前端技术栈的跨端解决方案

加入 alova 社区​

Discord
社区的 GPT 机器人为你解答
微信
在群聊交流，更快获得回应
X
关注我们，持续获得最新动态

欢迎参与贡献​

在参与贡献前，请务必详细阅读 贡献指南，以保证你的有效贡献。

让我们开始吧​

接下来，我们将从最简单的请求开始，再到请求策略的讲解，了解 alova 如何简化你的工作，再深入到进阶指南，以及在实际项目中总结的最佳实践。

让我们开始学习 alova 吧！

5 分钟快速入门视频
在 5 分钟内学会使用 alova
快速开始文档
更详细地学习 alova，自由掌控学习时间
alova使用调查，花3分钟填下，求你了！alova用在项目里了吗？快来告诉我