alova 是什么
alova 是一个轻量级的请求策略库，支持开发者使用声明式实现例如请求共享、分页请求、表单提交、断点续传等各种较复杂的请求，让开发者使用非常少量的代码就可以实现高可用性和高流畅性的请求功能，这意味着，你再也不需要自己绞尽脑汁编写请求优化代码，再也不需要自己维护请求数据和相关状态，你只需要选择并使用请求模块，设置参数后，alova 帮你搞定。从而提升开发效率、应用运行效率，还能降低服务端压力。
如果你还未阅读 快速入门，建议你先阅读它再继续阅读这部分内容。
其实，alova 实例是一个全局的请求配置，所有通过这个 alova 实例的请求都将使用它的配置信息，接下来跟着示例代码来了解这些配置吧！
在接下来的入门指南中，我们将以待办事项（todo）为例，围绕着获取不同日期的待办事项列表、查看 todo 详情，以及创建、编辑、删除事项等需求进行alova的讲解。让我们开始吧！
创建 Alova 实例
一个 alova 实例是使用的开端，所有的请求都需要从它开始。它的写法类似axios，以下是一个最简单的 alova 实例的创建方法。
vue
javascript
import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';
const alovaInstance = createAlova({
baseURL: 'https://api.alovajs.org',
statesHook: VueHook,
requestAdapter: GlobalFetch()
});react
javascript
import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import ReactHook from 'alova/react';
const alovaInstance = createAlova({
baseURL: 'https://api.alovajs.org',
statesHook: ReactHook,
requestAdapter: GlobalFetch()
});svelte
javascript
import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import SvelteHook from 'alova/svelte';
const alovaInstance = createAlova({
baseURL: 'https://api.alovajs.org',
statesHook: SvelteHook,
requestAdapter: GlobalFetch()
});在这个创建 alova 实例的代码中，分别指定了baseURL、statesHook、requestAdapter，现在我们来了解下它们：
- baseURL：（可选）表示请求的根路径，通过这个 alova 实例发送的请求都会在前面拼接 baseURL，一般设置为域名；
- statesHook：（必须）它用于确定在 use hook（例如 useRequest）应该如何返回状态化数据，目前提供了 VueHook、ReactHook、SvelteHook 分别用于支持 vue、react 和 svelte，statesHook 将会帮我们创建不同 UI 框架的请求相关的、可以被 Alova 管理的状态，包括请求状态 loading、响应数据 data、请求错误对象 error 等；
- requestAdapter ：（必须）请求适配器，请求适配器将用于所有请求的发送，请求发送模块和具体的请求信息是解耦的。在示例代码中使用了默认提供的 GlobalFetch ，它由
window.fetch提供请求支持。
设置全局请求拦截器
通常，我们需要让所有请求都用上相同的配置，例如添加 token、timestamp 到请求头，alova为我们提供了全局的请求拦截器，它将在请求前被触发，我们可以在此拦截器中统一设置请求参数，这也与axios相似。
javascript
const alovaInstance = createAlova({
// ...
// 函数参数为一个method实例，包含如url、params、data、headers等请求数据
// 你可以自由修改这些数据
// highlight-start
beforeRequest(method) {
// 假设我们需要添加token到请求头
method.config.headers.token = 'token';
}
// highlight-end
});你也可以将 beforeRequest 设置为异步函数。
javascript
const alovaInstance = createAlova({
// ...
// highlight-start
async beforeRequest(method) {
// 执行一些异步任务
// ...
}
// highlight-end
});详细的请求方法实例介绍将在下一节中讲解
设置全局响应拦截器
当我们希望统一解析响应数据、统一处理错误时，此时可以在创建alova实例时指定全局的响应拦截器，这同样与axios相似。响应拦截器包括请求成功的拦截器和请求失败的拦截器。
javascript
const alovaInstance = createAlova({
// ...
// highlight-start
// 使用数组的两个项，分别指定请求成功的拦截器和请求失败的拦截器
responded: {
// 请求成功的拦截器
// 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
// 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
onSuccess: async (response, method) => {
if (response.status >= 400) {
throw new Error(response.statusText);
}
const json = await response.json();
if (json.code !== 200) {
// 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
throw new Error(json.message);
}
// 解析的响应数据将传给method实例的transformData钩子函数，这些函数将在后续讲解
return json.data;
},
// 请求失败的拦截器
// 请求错误时将会进入该拦截器。
// 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
onError: (err, method) => {
alert(error.message);
}
}
// highlight-end
});如果不需要设置请求失败的拦截器，可以直接传入请求成功的拦截器函数，而不再需要通过对象来设置回调。
javascript
const alovaInstance = createAlova({
// ...
// highlight-start
async responded(response, method) {
// 请求成功的拦截器
}
// highlight-end
});特别注意
onSuccess和onError均可以设为同步函数和异步函数。- onError 回调是请求错误的捕获函数，onSuccess 中抛出错误不会触发 onError。当捕获错误但没有抛出错误或返回 reject 状态的 Promise 实例，将认为请求是成功的，且不会获得响应数据。
- 在 2.0.x 及以前的版本中将
responded错误地拼写为了responsed，在 2.1.0 中已将两者做了兼容处理，建议在后续版本中使用responded代替responsed。
设置全局请求超时时间
以下为设置全局的请求超时时间。
javascript
// 全局设置请求超时时间
const alovaInstance = createAlova({
// ...
// highlight-start
// 请求超时时间，单位为毫秒，默认为0，表示永不超时
timeout: 50000
// highlight-end
});alovajs其他信息
为什么创造 alova
数据请求一直是应用程序必不可少的重要部分，自从 XMLHttpRequest 诞生以来请求方案层出不穷，客户端的数据交互探索一直聚焦于请求的简单性，如$.ajax、axios、fetch api以及react-query等请求工具，编码形式从回调函数、Promise，再到 usehook 不断发展，这些 js 库在请求简单性上已经做得很好了，不过它们只提供了通用的功能，这意味着对于不同的请求场景例如共享请求、分页请求、表单提交、上传和下载文件等，开发者依然需要自己编写复杂的代码，降低开发效率，性能也无法得到保证，在越来越看重的用户体验的时代，应用的流畅性变得越来越重要。
而我们认为还有更简单的方案，例如使用一个 use hook 实现对分页数据的获取和管理、实现对表单数据的管理、实现断点续传等，即在不同的请求场景下使用不同的请求策略模块来高效地实现请求功能，从而让开发者在编写更少量代码同时，也能实现更高效地 Client-Server 数据交互，这就是我们提出的解决方案，也是 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 options（vue2 和 vue3） 写法中完美使用 alova，点此查看详情。后续我们将陆续支持以下框架：
- 函数式，如
solid/preact/qwik。 - class 式，如
angular/lit/stencil。 - options 式，如
原生小程序(中国🇨🇳)。
alovajs 还提供了其他强大的请求策略：
| 名称 | 描述 | 文档 |
|---|---|---|
| 分页请求策略 | 自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 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 |
想学习更多 alovajs 的用法，欢迎来alova 官网学习。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。
如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对 alovajs 怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~
欢迎加入交流社区
有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。