这是一个idea, 讨论下对于请求工具的扩展 (增加哪些能力, 实现方式等)

[halo951]

hallo, 我看了 alova 以后有一些关于请求工具扩展的idea想跟作者还有社区各位讨论一下

(ps: 别的社区好多都是国外的, 交流障碍有点难克服呦~)

摘要

• 讨论下, 请求工具可以扩展哪些能力(这些能力的界定范围, 我的理解上跟alova有些出入, 希望可以讨论下)
• 讨论关于请求工具扩展的实现方式

请求工具扩展哪些扩展能力

因为我自己也写有请求工具的扩展库 (跟 alova 类似, 但只是在axios上面包装了一层扩展实现的), 我也总结了一份请求工具可以扩展的能力, 如下供参考:

分类	feature	中文名	描述
请求过程	debounce	防抖	在一段时间内发起的重复请求, 后执行的请求将等待上次请求完成后再执行
请求过程	throttle	节流	在一段时间内发起的重复请求, 后执行的请求将被抛弃
请求过程	merge	合并	在一段时间内发起的重复请求, 仅请求一次, 并将请求结果分别返回给不同的发起者
请求过程	retry	失败重试	当请求失败(出错)后, 重试 n 次, 当全部失败时, 再抛出异常
请求过程	interrupt	中断	指定什么情况下终止请求, 一般用来处理页面切换时, 终止未完成的请求使用
请求过程	offline	弱网暂存(离线请求)	提供弱网环境下, 当网络不佳或页面终止、退出场景下, 再下次进入页面时, 对未完成请求重放
请求过程	queue	请求队列	通过一定条件限制, 针对某些接口, 通过逐条消费方式, 进行请求
工具	logger	日志	自定义请求过程日志打印
工具	mock	模拟(调试用)	提供全局或单个接口请求 mock 能力
工具	loading	全局 loading	提供全局 loading 统一控制能力, 减少每个加载方法都需要独立 loading 控制的工作量
工具	sign	参数签名	提供请求防篡改能力, 这个功能需要搭配后端逻辑实现
工具	onlySend	仅发送	对 navigator.sendBeacon 方法的封装, 实现页面离开时的埋点数据提交, 但这个需要后端支持
工具	mp	小程序请求适配器	扩展对微信、头条、qq 等小程序请求的支持

● hooks api (这部分放到store层可能会更加合理一些, 因为主体上是一些业务操作, 而非通信交互)
○ 缓存 & SWR (存在缓存数据时, 优先展示缓存, 然后等请求完成后更新数据)
○ reactive & watch api (监听到数据变化, 自动触发请求交互, 本质上这部分是响应式的内容)
○ 屏幕聚焦重新请求
○ 轮询
○ orm
○ navigator.sendBeacon | 仅发送(用于埋点类请求)
○ 静默提交 (保存草稿类需求, 事件触发+延时更新方式)
○ (store) 持久化以及 IndexedDB

ps: 因为写的时候, 没搞到一个文档内, 所以结构上不太统一 ,

聊聊我的看法, 我比较认可作者对于 axios 的理解, axios 仅关注请求过程的实现. 请求之外的内容与axios无关. (fetch同理). 在我的理解里面, 前端(客户端) 与 外部通信, 应该都归纳到通信层, 这里面仅处理通信相关事项. 所以, 对于alova 里面设计的一些关于业务侧的扩展, 我不是特别认可. 通信层这块就应该只做通信这件事情 (处理请求的发送, 响应数据的处理, 还有一些请求过程的调度)。 所以, 上面的文档上面, 将一部分在请求工具内扩展的能力给剥离出来, 希望可以放到 Store 中去实现.

关于请求工具扩展的实现方式

首先, 关于请求层扩展功能的实现方式上, 我认为主要是2种方式:

• 上层包装, 也就是 alova 的实现方式.
• 扩展现有api, 比如通过 axios 预留的 adapter 口子, 可以在请求过程中扩展一些功能.

这里我现在比较迷茫, 主要现在有几点考虑的内容

1. 如果采用上层包装的方式, 虽然对于请求工具本身没有什么侵入性, 并且可以在一定程度上降低引用库体积, 但是这种方式的实现存在接入和改造成本. 哪怕保持与axios一致的api设计, 对使用者来说, 也会有一定的心智负担还有改造难度.
2. 如果是在axios上面扩展(插件式), 这里的实现方式是接管 axios 的 adapter (我上面的feature的想法就是这样), 这种方式能在一定程度上减少改造的工作量, 以及易用性上会更好一些, 但是感觉以adapter的名义做插件的事情又有些不太合理 ,. 当然了, 以我们团队目前的业务体量来说(b端后台类), 暂时不太在乎代码多这么一点~

大概就是这个样子, 有时间的话, 一块聊聊, 讨论下想法~

参考

• alova
• kuitos 大佬写的 axios-extensions
• ahooks