“alova” 轻量级的请求策略库

官方文档：Alova.JS - 工作流精简的下一代请求工具 | Alova.JS

“alova” 是一个轻量级的请求策略库，它提供了一套完整的应对复杂请求场景的方案，我们称之为请求策略。通过简单配置参数，可以实现诸如请求共享、分页请求、表单提交、断点续传等复杂请求，而无需编写大量的代码。

Alova是一个独立的请求策略库，用于简化和优化前端的HTTP请求过程，可以与Naive.js等UI框架结合使用

alova 的目标是根据不同的请求场景提供适合的现成请求方案，从而提升应用的可用性、流畅性，降低服务端压力，以及降低开发者的编码量。它并不是完全替代 axios，而是与 axios 等请求库配合使用，提供更高级的功能。

主要特点

• 轻量级：体积小巧，只有 4kb+，是 axios 的 30%。

• 请求策略：提供多种请求策略，如分页请求、表单提交、断点续传等，通过简单配置即可实现复杂请求。

• 状态管理：内置状态管理功能，减少重复代码。

• 缓存支持：支持数据缓存，减少不必要的数据刷新。

• 多框架支持：支持 Vue、React、Svelte 等多种前端框架。

与 axios 的对比

alova 并不是完全替代 axios，而是与 axios 等请求库配合使用，提供更高级的功能。它在请求管理和状态处理上更具优势，尤其是在复杂的请求场景中。

Vue 3 组件，使用了 TypeScript 和 Composition API。主要功能是通过按钮触发一些模拟的 API 请求，用于测试或演示不同的场景，比如登出、刷新令牌、重复请求等。组件中还涉及到国际化（i18n）的使用，以及一些 UI 组件的布局和样式。

1. 安装Alova

在项目中安装Alova库：

npm install alova --save

2. 创建Alova实例

在项目中创建一个Alova实例，用于配置基础路径、适配器等信息：

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';

export const AlovaInstance = createAlova({
  baseURL: '你的域名', // 设置基础请求路径
  statesHook: VueHook, // 集成Vue状态管理
  requestAdapter: GlobalFetch(), // 使用fetch作为请求适配器
  shareRequest: true, // 共享请求
  beforeRequest() {}, // 请求前的拦截器
  responded: {
    onSuccess: async (response: Response) => {
      const json = await response.json();
      if (json.code === 1) {
 &