• 作者:老汪软件技巧
  • 发表时间:2024-09-03 21:04
  • 浏览量:

两年前,我设计开发了一个叫做alovajs的js请求策略库,在23年4月份开始对外宣传以来已经取得了来自世界各地开发者的好评,也获得了2700+stars,其中不乏大厂的牛人的认可。

目前alova@3.x已发布,定位为“工作流精简的下一代请求工具”。

到现在也已经无偿维护它了30个月时间,版本也来到了3.x,在这期间经过不断地思考,推翻,再思考,再推翻,就是为了希望它可以做到一些其他请求工具没有做的,成为一个真正能帮助前端的事,我想我已经找到了一个可靠的方向。

那就是,做一个“工作流精简的下一代请求工具”,最大化帮助前端开发精简API集成的工作流。

以下是关于alovajs的探索故事,也是一个开源项目从想法开始的故事。

如果你对alovajs感兴趣,也诚挚邀请你加入社区共同进步。

alovajs源于小项目,使命却是驶向大海

2022年3月的一天,我因某种情况萌生了开发一个名叫“目标控”的App,那时候得益于微信设置功能和滴答清单的启发,我希望目标控可以实现无延迟的数据请求和提交,即立即响应模式,即使在弱网或断网模式下也可以正常使用,但由于在网上翻了一遍都没有合适的解决方案,相似的乐观更新方案也无法满足,该死的热爱分享欲又让我决定以一个请求库的形式实现它,这就是alovajs的萌芽点,但那会儿还没有这名儿呢。

设计alovajs

一个库的开始不是设计,不是开发,而是理清需求

温馨提示:强烈建议你先简单了解下alovajs的概述部分,才能更好地理解下面的内容。

那会儿也没有产品定位可言,只是做出满足自己需求的js库,我研究了现有的请求库,列出了下面这些需求:

要支持无感数据交互模式,即在断网情况下也能正常提交且无延迟,让用户毫无感知按时下热门的useHook设计,让接口更加易用一套代码同时支持多种框架如vue、react等,js运行环境如浏览器、react-native、uniapp和taro等多js环境下一致的使用方式鉴于react-query的缓存功能很不错,这个也要加进来由于axios的影响力和简便性,让alovajs容易上手,设计要类似axios

然后根据需求进行库的API设计。

这些设计确实在以后的时间里得到了证实,alovajs已经通过适配器的方式完美兼容了vue、react、svelte框架,并且也可以在浏览器、react-native、uniapp和taro等多种js环境下运行,并且保持了一致的使用方式,这让我看到了曙光。

在这之后的几个月里alovajs虽然发布了,但一直没有去宣传它,一方面是因为我就是拿他用在“目标控”项目上的,虽然它在这个项目上历练完善了一番,但依旧很不完整,定位也不清晰,最初的版本介绍就是这样的。

到后来,“目标控”项目已宣告夭折了,但alovajs却还在继续坚持着。

alovajs的方向探索

本着曾经互联网产品经理身份的执念,我还是希望将alovajs打造成一个差异化的产品。我常常会问自己,alovajs和其他请求库有什么区别吗?用户为什么要用alovajs?它在设计上确实和其他库有些不一样,这并不是马上能回答出来的问题。后来我尝试将请求库的方向定位在“轻量级请求库”、“多端统一的请求库”,但后来都被自己否定了,因为这些都不能为开发者带来实质性的帮助,也都不能称之为优势。

时间来到了22年9月份,一次契机让我发现了vue-request这个优秀的基于vue的请求库,它的usePagination和useLoadMore立刻给了我灵感,这种分页的实现形式让我发现这也是我想要的,同时这让我意识到useHook的力量之强大,我可以把它按请求场景切分模块,根据不同场景使用不同的useHook,而且之前实现的无感数据交互其实也算是其中一种场景。如果以这为方向的话,开发者按不同的请求场景选择不同的useHook就可以了,既提高了开发效率、降低了编码复杂度,又能防止初级前端写出低效代码,还能更大化地利用alovajs的核心特性实现性能更好、服务端压力更小的请求功能,至此,“轻量级的请求策略库”被我选中了。

然后为了指导alovajs以后的设计方向,我还提炼抽象出了alovajs的请求场景模型(RSM),主要分为以下四个流程:

请求时机 -> 请求行为 -> 请求事件 -> 响应处理

这里就简单提一下。

说干就干,我根据这个定位开始重构alovajs2.0,将无感数据交互功能从1.0中剥离出来,并设计了中间件机制来适应更多请求场景策略useHook的开发,潜心研究并设计开发了分页策略和无感数据交互策略。

在后来也陆续增加了useForm、useAutoRequest、useSSE等请求策略模块,但这还远远不够。

下一代请求工具想法的诞生

23年的5月13日,我在github上收到了这样一个issue

起初我并没在意这个issue,只是简单了解了下openAPI自动生成请求代码的功能,觉得很不错,但迫于精力有限也没深入思考,那会儿也还没在思考alovajs的方向。但在最近,我又会偶尔思考alovajs的方向,这个还是open状态的issue一直跑到我的思绪里,然后默默地把这个issue的label从"feature-request"改成了"feature-request:confirmed"。

同时,这个issue让我灵光闪到,其实alovajs还可以拉近前端和后端的协作距离,并更进一步地简化前端开发的工作流,这就是我为alovajs制定的3.0版本的发展方向:

alovajs将帮助开发者最大程度地简化API集成工作流,你只需要指定使用哪个API就可以了(这也是思考了3个月才得到的)

我的具体方案如下:

上图中的1、2、3、4、6步通过自动生成API代码解决,但我们的生成方案相比openapi-generator等工具会更进一步,它将会自动生成 ts 类型完整的、描述完整的请求函数,无论是js项目还是ts项目,都调用无需引入,让开发者就像直接调用location.reload这样方便,并且请求函数可直接看到完整的描述和请求参数类型提示。

由于自动生成的请求函数拥有完整的描述和类型提示,通过vscode插件完成交互式的方式快速检索需要使用的API,你也不再需要去查阅 API 文档了。

解决前后端协作断层的问题,接口的任何变动前端可自动被通知,如果在构建项目时发现存在变动,则会抛出错误停止构建,如果是ts项目也会在编译时抛出错误,也可以通过vscode插件查看变动记录。

以下是一个演示视频。

而第6步“编写复杂的请求逻辑”要如何解决呢?当然是使用请求策略模块了,它有高性能和场景化的特点,用户可以使用非常少量的代码就可以实现各种场景的请求功能。

开源的意义是什么_对开源的理解和感受_

在24年3月开始制定alova@3.0的开发计划,与核心成员MeetinaXD花了4个月时间一起重构了几乎整个项目,优化内容有点多:

重新设计了底层架构,一套hooks可以同时在vue、react、svelte,甚至在vue options sytle下也能使用。可用范围增加到了服务端,你可以在express、koa、nestjs这些服务端框架中使用alova,并且新增了服务端请求策略server hooks。废弃了alova@2.x中的10项配置,优化了9处设计。

此外,由我们的核心成员czlin负责的3.0最重要的部分——vscode插件也已经可以使用了,基本实现了我们当初制定的目标。

到现在,alova@3.0已经过了beta期,可以在生产环境稳定使用了。

只有不断探索,才能变得更加优秀

当时一篇被吐槽的文章《是时候该替换你的axios了》冲上了热搜,我们曾经收到过这样的评论

在刚推出来的时候确实没那么好,但我深知每个产品都不是一蹴而就的,它需要时间沉淀。

Apple 1电脑开始连机箱都没有

vue的发展旅程也是不断摸索前进的过程

我只是被这样的产品历程所打动,坚持做一件事是最容易成功的途径,好的产品都要经过几年十几的考验,何况alovajs也只有1年半左右时间,被一部分人接触只有8个月。在这个期间也在一次次地探索更好的方案一步步前进的。

alovajs开始设计的useHook包含useRequest、useWatcher、useEffectWatcher、useManual、useController,然后再慢慢缩减为只有useRequest、useWatcher、useFetcher三个核心hooks。

Commit地址

在并行请求的设计上,是自定义实现一个类似Promise.all的形式,还是现在的onSuccess函数绑定形式,在这里纠结了好几个版本,改来又改去,以下是当年被废弃的responser设计。

Commit记录找不到了

为了兼容IndexedDB等异步的缓存方案,一开始尝试将存储适配器设计为异步函数,但会带来一系列问题,然后又尝试StorageConnector通过事件机制实现,依然不够完美,最后再到现在的自定义localCache异步函数机制。

Commit地址

也感谢对alovajs做出支持和贡献的朋友们,以下随便截了几张图,还有很多未被包含的贡献。

以及对文档不断地对细节补充和最佳实践的完善、对缓存恢复模式大胆尝试了缓存版本的方案,以及为了让alovajs可以提供完整的ts类型提示,尽量地使用自动推断类型来减少开发者定义类型的麻烦,在这方面也确实花了很大的精力优化和兼容不同的UI框架等等。

其中,文档大改了两到三次,感谢 @橘子皮 给我提供了第一次文档修改的意见,@well 给我提供了第二次文档修改的意见,然后我们的文档就有了这样的口碑。

@青木 却帮我打开了新的alova全端思路。

得供起来!

很多已经记不清楚了,npmjs上的记录告诉我已经发布了146个版本。

github上也有很多人提出bug,我也在第一时间回复和修复,真的非常感谢,如果无法马上判断问题所在,我也会在codesandbox上自行复现,并用这个demo作为和使用者的沟通桥梁。

写在最后

非常感谢你的阅读,不管多难,路还是要继续往下走。

如果认可alovajs,请到Github上为它点星。

如果想了解alova的话,可以访问官网,在这里,你可以找到更详细的文档和示例代码,帮助你更好地理解和使用这个工具。

有任何问题,你可以加入以下群聊咨询,也可以在github 仓库中发布 Discussions,如果遇到问题,也请在github 的 issues中提交,我们会在最快的时间解决。

同时也欢迎贡献你的一份力量,请移步贡献指南。