alova是一个轻量级的请求策略库,旨在简化接口的管理和使用。它分为两部分:
-
声明式实现复杂请求: 你可以通过简单配置参数,即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等,无需编写大量代码,提高开发效率,应用性能,减轻服务端压力。
-
API自动管理和维护: 不用再自己编写请求函数,也不用再查阅API文档了,alova可帮你生成完整的、描述详尽的请求函数的TypeScript类型,让前端项目与服务器端无缝对接。当服务端API更新时,前端项目也会收到通知并阻止项目发布。
使用alovajs后,你只需要选择对应的useHook进行请求即可,被称为懒人版请求库,alova同时支持vue/react/svelte
框架。如果你也喜欢 alovajs,请在Github 仓库中贡献一颗 star,这对我们非常重要。
欢迎加入交流社区
有任何使用问题,你可以加入以下群聊咨询,也可以在github 仓库中发布 Discussions,如果遇到问题,也请在github 的 issues中提交,我们会在最快的时间解决。
同时也欢迎贡献你的一份力量,请移步贡献指南。
以下为部分章节的教程,想学习更多 alovajs 的用法,欢迎来alova 官网学习。
转换响应数据
当响应数据结构不能直接满足前端需求时,我们可以为 method 实例设置transformData
钩子函数将响应数据转换成需要的结构,数据转换后将会作为data
状态的值。
javascript
const todoListGetter = alovaInstance.Get('/todo/list', {
params: {
page: 1
},
// 函数接受未加工的数据和响应头对象,并要求将转换后的数据返回,它将会被赋值给data状态。
// 注意:rawData是全局响应拦截器(如果有设置)过滤后的数据,响应拦截器的配置可以参考[设置全局响应拦截器]章节。
transformData(rawData, headers) {
return rawData.list.map(item => {
return {
...item,
statusText: item.done ? '已完成' : '进行中'
};
});
}
});
注意
- 在 usehooks 中使用时,在
transformData
中抛出错误将会触发onError
;- 使用 method 实例直接发起请求时,将会返回一个 reject 状态的 promise 实例;
transformData 的特殊使用场景
由于 transformData 函数具有以下两个特性:
- 只有在网络请求响应时才被触发,而命中响应缓存时不会触发;
- 支持异步函数;
你也可以将它当作网络请求响应的钩子函数使用,例如以文件为响应数据的缓存场景下,可以配合 IndexedDB 进行文件数据的缓存,同时配合 受控的缓存 来命中 IndexedDB 中的文件缓存。
javascript
const fileGetter = alovaInstance.Get('/file/file_name', {
// 使用IndexedDB缓存文件
async transformData(fileBlob) {
await new Promise((resolve, reject) => {
const tx = db.transaction(['files'], 'readwrite');
const putRequest = tx.objectStore('files').put({
file: fileBlob
});
putRequest.onsuccess = resolve;
putRequest.onerror = reject;
});
return fileBlob;
}
});
(结尾)为什么要使用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中提交,我们会在最快的时间解决。
同时也欢迎贡献你的一份力量,请移步贡献指南。