跳至主要內容

Alova.js 现代化请求库完全指南

萌萌哒草头将军大约 3 分钟前端React

前言

昨天介绍了 pinia-colada 库的基本使用,有个小伙伴评论里提到了 alova,好奇心驱使下,我研究了一会这个库,发现 alova 作为新一代请求策略库,正在改变开发者处理 API 交互的方式。

往期精彩推荐

核心特性与安装

alova 是一个轻量级(仅 4kb+)但功能强大的请求库,具有以下突出特点:

  • 支持 React/Vue/Svelte 等主流框架
  • 提供 20+ 开箱即用的请求策略
  • 内置请求缓存、数据预取等高级功能

安装方式极为简单:

npm install alova --save
# 或
yarn add alova

基础使用示例

创建 Alova 实例:

import { createAlova } from "alova";
import VueHook from "alova/vue";
import adapterFetch from "alova/fetch";

const alovaInstance = createAlova({
  baseURL: "https://api.example.com",
  statesHook: VueHook,
  requestAdapter: adapterFetch(),
  responded: (response) => response.json(),
});

发起基础请求:

// GET 请求
const { data } = await alovaInstance.Get("/user/profile").send();

// POST 请求
const { data } = await alovaInstance
  .Post("/posts", {
    title: "新文章",
    content: "这是内容...",
  })
  .send();

高级请求策略

alova 真正的强大之处在于其丰富的请求策略:

  1. 分页请求
const {
  pageData, // 当前页数据
  isLastPage, // 是否最后一页
  nextPage, // 加载下一页
} = usePagination(
  (page, size) => alovaInstance.Get("/list", { params: { page, size } }),
  { initialPage: 1, pageSize: 10 }
);
  1. 智能监听请求
// 当 keyword 变化时自动发送请求(带防抖)
const { data } = useWatcher(
  () => alovaInstance.Get("/search", { params: { keyword } }),
  [keyword],
  { debounce: 300 }
);
  1. 请求重试机制
const { onSuccess } = alovaInstance
  .Post("/order", orderData)
  .retry(3, 1000) // 重试3次,间隔1秒
  .send();

开发者工具支持

alova 提供专属 DevTools 支持:

  • 实时监控请求状态
  • 自动生成 TypeScript 类型定义
  • 可视化调试请求缓存

安装方式:

npm install @alova/devtools --save-dev

配置示例:

import { devtools } from "@alova/devtools";

const alova = createAlova({
  // ...其他配置
  plugins: [
    devtools({
      enabled: process.env.NODE_ENV === "development",
    }),
  ],
});

性能优化技巧

  1. 数据预加载
// 鼠标悬停时预加载
const prefetchData = () => {
  useFetcher().fetch(alovaInstance.Get("/detail/123"));
};
  1. 请求共享
// 多个组件共享同一个请求
const { data } = useRequest(alovaInstance.Get("/shared-data"));
  1. 智能缓存
const alova = createAlova({
  // ...其他配置
  cache: {
    expire: 60 * 1000, // 设置1分钟缓存
  },
});

结语

alova 通过其创新的请求策略模式和极简的 API 设计,为现代前端开发带来了全新的数据交互体验。

往期精彩推荐