alova—轻量级请求策略库

最新推荐文章于 2024-07-28 19:03:01 发布

骆骆爱学习

最新推荐文章于 2024-07-28 19:03:01 发布

阅读量1.1k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/qq_34082921/article/details/134554367

版权

文章介绍了alova，一个旨在简化接口管理和使用的轻量级请求策略库。它支持声明式编程，提供高级功能如请求共享、分页、表单提交等，通过自动生成请求函数和场景化模型，降低开发复杂度，实现高效的客户端-服务器交互。alova兼容多种框架和请求库，且具有低耦合和扩展性。

摘要由CSDN通过智能技术生成

前言

在这里插入图片描述 Alova官网
 Alova—github官网

alova 是什么

alova 是一个轻量级的请求策略库，目标是让接口的管理和使用变得非常简单，主要分为以下两部分：

声明式实现复杂请求

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

可自动生成 ts 类型完整的、描述完整的请求函数，你也不再需要查阅 API 文档，而是在 IDE 中通过关键字找到你想使用的请求函数，然后像访问location.reload一样使用它们，让客户端代码和服务器端无缝对接。无论是 js 项目还是 ts 项目，你都可以享受响应数据的类型提示。

当服务端更新 API 时，前端项目还会收到变动通知，并且会阻止项目发布。

为什么创造 alova

数据请求一直是应用程序必不可少的重要部分，自从 XMLHttpRequest 诞生以来请求方案层出不穷，客户端的数据交互探索一直聚焦于请求的简单性，如$.ajax、axios、fetch api以及react-query等请求工具，编码形式从回调函数、Promise，再到 usehook 不断发展，这些 js 库在请求简单性上已经做得很好了，不过它们只提供了通用的功能，这意味着对于不同的请求场景例如共享请求、分页请求、表单提交、上传和下载文件等，开发者依然需要自己编写复杂的代码，降低开发效率，性能也无法得到保证，在越来越看重的用户体验的时代，应用的流畅性变得越来越重要。

同时，客户端和服务端的协作也是割裂的，前端工程师需要查阅 API 文档并手动编写 API 函数，并且服务端 API 的任何更改都需要主动通知前端工程师，这将会使产品变得更加不可控。

而我们认为还有更简单的方案，两步即可完成复杂请求：

直接在 IDE 中使用关键词找到你想使用的请求函数（请求函数自动生成）；
根据你的请求场景，例如分页、表单提交、断点续传等，选择对应的 useHook，它将帮你管理数据，控制何时应该发送请求；
从而让开发者在编写少量代码也能实现更高效地 Client-Server 数据交互，这就是我们提出的解决方案。同时，alova 具有很灵活的扩展能力来实现不同场景下的请求策略，你也可以自定义自己的请求场景，这部分内容在高级章节。

为了覆盖更多请求场景，我们还将请求场景抽象成了请求场景模型（RSM），它很好地解释了 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 有很大的优势。

二、使用步骤完整的特性列表

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

alova 请求策略表

alova 是核心库，它提供了缓存策略、请求共享策略，以及状态管理等通用功能，能满足 99%以上的请求需求。同时，alova 还提供了业务逻辑的，高频使用的请求策略 hook，可以直接用于特定场景。以下为 alova 提供的请求策略 hook 列表。

名称	描述	文档
分页请求策略	自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50%	usePagination
–	–	–
无感数据交互策略	全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用	useSQRequest
–	–	–
表单提交策略	为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能	useForm
–	–	–
文件上传策略	更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换	useUploader
–	–	–
发送验证码	验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。	useCaptcha
–	–	–
自动重新拉取数据	在一定条件下自动重新拉取数据，保证始终展示最新数据。	useAutoRequest
–	–	–
跨组件触发请求	一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数	actionDelegationMiddleware
–	–	–
串行请求的 useRequest	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数	useSerialRequest
–	–	–
串行请求的 useWatcher	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。	useSerialWatcher
–	–	–
请求重试策略	请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用	useRetriableRequest
–	–	–
SSE 请求	通过 Server-sent Events 进行请求	useSSE

三、如何使用

安装

npm install alova --save

alova 结合 UI 框架，让请求变得更简单，你可以使用 alova 提供的use hook发起请求，它将返回例如loading等多个请求相关的状态化数据，并在 alova 中自动管理它们，而无需自己维护。

使用 alova 时，请确保 UI 框架符合以下版本要求：

React: >= v16.8
Vue: 2.7、3.x
Svelte: 任意

使用 useRequest 发送一个请求

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <span v-else>responseData: {{ data }}</span>
</template>

<script setup>
import { createAlova, useRequest } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';
// 1. 创建alova实例
const alovaInstance = createAlova({
  // VueHook用于创建ref状态，包括请求状态loading、响应数据data、请求错误对象error等
  statesHook: VueHook,
  // 请求适配器，推荐使用fetch请求适配器
  requestAdapter: GlobalFetch(),
  // 全局的响应拦截器
  responded: response => response.json()
});
// 2. 使用alova实例创建method并传给useRequest即可发送请求
const { loading, data, error } = useRequest(
  alovaInstance.Get('https://jsonplaceholder.typicode.com/todos/1')
);
</script>