初识alova请求策略库

alova 是什么

        alova 是一个轻量级的请求策略库，支持开发者使用声明式实现例如请求共享、分页请求、表单提交、断点续传等各种较复杂的请求，让开发者使用非常少量的代码就可以实现高可用性和高流畅性的请求功能，这意味着，你再也不需要自己绞尽脑汁编写请求优化代码，再也不需要自己维护请求数据和相关状态，你只需要选择并使用请求模块，设置参数后，alova 帮你搞定。从而提升开发效率、应用运行效率，还能降低服务端压力。

为什么选择 alova

alova 也致力于解决客户端网络请求的问题，但与其他请求库不同的是，alova 选择了业务场景化请求策略的方向，它配合axios/fetch api等请求库后能满足你绝大部分请求需求（99%）的同时，还提供了丰富的高级功能。

• 你可能曾经也在思考着应该封装fetch和axios，现在你不再需要这么做了，通过 alova 使用声明的方式完成请求，例如请求共享、分页请求、表单提交、断点上传等各种较复杂的请求，以及自动化缓存管理、请求共享、跨组件更新状态等。
• alova 是轻量级的，只有 4kb+，是 axios 的 30%+。
• 目前支持vue/react/react-native/svelte，以及next/nuxt/sveltekit等 SSR 框架，同时也支持Uniapp/Taro多端统一框架。
• alova 是低耦合的，你可以通过不同的适配器让 alova 在任何 js 环境下，与任何 UI 框架协作使用（内置支持的 UI 框架为vue/react/svelte），并且提供了统一的使用体验和完美的代码迁移。
• 使用 alova 还能实现 api 代码的高聚合组织方式，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势。

特性

1. 🕶 在 vue(composition/options)、react、svelte 3 个 UI 框架，以及 uniapp、taro 环境下提供统一的使用体验，完美迁移
2. 📑 与 axios 相似的 api 设计，更简单熟悉
3. 🍵 开箱即用的高性能场景化请求策略，让应用更流畅
4. 🐦 4kb+，只有 axios 的 30%+
5. 🔩 高灵活性，兼容任意请求库，如 axios、superagent 或 fetch-api
6. 🔋 3 种数据缓存模式，提升请求性能，同时降低服务端压力
7. 🔌 丰富的扩展功能，可以自定义请求适配器、存储适配器、中间件，以及 states hook
8. 🖥️ [2.2.0+]服务端渲染（SSR）
9. 🖥️ [2.17.0+]支持 commonjs 规范
10. 💕 请求共享，避免同时发送相同请求
11. 🪑 数据预拉取，这意味着用户可以更快看到信息，无需等待
12. 🦾 实时自动状态管理
13. 🎪 交互式文档和示例
14. 🎈 Typescript 支持
15. ⚡ 支持 tree shaking，这意味着 alova 的生产体积往往小于 4kb

与其他库比较

与 axios 对比​

        axios 提供了基于 promise 的非常简单易用的 HTTP 请求功能，只需要简单的一行代码即可发送和接收请求，并且可以在浏览器和 nodejs 环境下运行，是一个非常优秀的请求 js 库。

        但是 axios 聚焦于请求发送和接收响应，这意味着如果你需要自行编写更多代码来主动优化请求功能，而 alova 像是 axios 的武器装备，将 axios 与 alova 组合使用可以获得更强大的请求能力，以下是 alova 为 axios 附加的请求管理能力。

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

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

 axios🌰

// 获取领域相关专家信息
const getRelatedAuthor = async () => {
  state.gptLoading = true
  const [error, res] = await ReportApi.getRelatedAuthor({
    authorCodes: [],
  })
  state.gptLoading = false

  if (error) return

  if (res.code === 200) {
   // TODO
  }
}

 alova 🌰 

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

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

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

alova 为 axios 提供响应数据缓存​

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

alova 为 axios 提供请求共享功能​

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

        你可能遇到过这种情况，当一个请求发出但还未响应时，又发起了相同请求，就造成了请求浪费，或者重复提交问题，例如以下三种场景：

1. 一个组件在创建时会获取初始化数据，当一个页面同时渲染多个此组件时，将会同时发出多次相同请求；
2. 提交按钮未被禁用，用户点击了多次提交按钮；
3. 当预加载还未完成时进入了预加载页面，将会发起多次相同请求；

         共享请求就是用来解决这些问题的，它是通过复用请求的方式来实现的，由于这种案例无法直观展示，就不展示了。

alova 为 axios 提供数据预拉取​

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

alova 可管理请求状态​

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

与 react-query、swr 对比​

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

alova 的目标不同​

        实际上，alova 的 use hook 也是参考了 react-query 和 swr 的设计，但是 alova 选择了请求策略库的方向，你可以在不同的请求场景下使用不同的请求策略模块，让你在编写更少量代码同时，也能实现更高效地 Client-Server 数据交互。

Method 代理设计​

        react-query 和 swr 都是在 use hook 中直接使用axios或fetch api发送请求，而 alova 使用了 Method 代理的设计模式，这样设计具有以下 3 个好处：

1. 统一的使用体验，不会因平台或 UI 框架不同而存在不同的使用方式。
2. axios和fetch api等请求库以请求适配器的方式，与每个 api 解耦，这让 alova 提供了统一的开发体验和完美的代码迁移。
3. 每个Method实例都代表不同的 api，你可以将同一个 api 的请求参数与请求行为参数聚合到同一个Method实例中，而不会分散开，更适合管理大量的 api。
4. alova 通过对Method实例上的请求参数序列化，实现了自动化管理响应数据缓存，你不需要指定缓存 key，而 react-query 和 swr 都需要自定义设置queryKey来管理缓存。

高灵活性​

        alova 通过各种适配器、中间件实现了很高的灵活性，不仅可以运行在任何 js 环境，还可以支持用户自定义不同场景下的请求模块。

轻量化​

        alova 很轻量，体积只有 react-query 和 axios 的 30%+。与 swr 体积相似，但提供更丰富的功能。