前段我发了一篇《是时候该换掉你的 axios 了》的文章引起了热议，各位小伙伴也给出了自己的看法，本来只是随便一发的对比 axios 和 alova 优劣势的文章，但是却遭到了一些同学的质疑。

思想碰撞是我们进步的阶梯，我没有要贬低这些质疑的意思，相反，我要感谢他们（质疑者）推着我思考和前进，在这边我想对这些声音做出自己回应。

因为我从这些质疑声中看到了，很多人的代码思维都还停留在使用层面，而缺少更深度的理解和思考，这篇文章我想聊聊我对开源框架和库更深入的观点，从更深入的角度聊聊我为什么看好 alova ！！！

看完我保证你一定会有所收获的，没有的话你尽管喷。 还不知道 alova 的可以预先了解下：

alova 的 Github 地址

alova 官网

如果你不知道 axios 的话，直通车在这

本文主要讨论编程背后的东西，而不是某个技术点的解决方案，欢迎大家参与共同讨论！

省流目录

1. react 和 vue 的伟大
2. （解答各位的质疑） alova 的优势在究竟哪里
3. （升华）开源框架罪恶史

react 和 vue 的伟大

深有体会的是，开源框架和库已经实实在在地给我们带来了太多便利，在深入讨论 alova 前，我们先从来 react 和 vue 等大家最熟悉的 UI 框架说起。

这些 UI 框架究竟给我们带来了什么，过去的王者 jquery 可谓雄霸天下，jquery 所解决的问题是提供一种更简单兼容性更好的 dom 操作 api ，让大家不需要关注兼容性问题，但对于新手来说，照样会把全部代码写在一个 js 文件中然后把代码乱放，来欣赏一段意大利泡面一样的 jquery 代码：

// ❌整个页面的 js 处理都集中在这里了
(function(win) {
    // 处理页头按钮点击事件
    $('#header .button').click(function() {
        // ...
    });

    // 处理页脚某个 tag 的鼠标移入事件
    $('#footer .tag').mouseenter(function() {
        // ...
    });

    // 处理主界面轮播图的事件
    $('#swiper .btn-left').mouseenter(function() {
        // ...
    });
    $('#swiper .btn-right').mouseenter(function() {
        // ...
    });
})(window);

项目以 html 、js 、css 为大模块进去分开，结构大概是这样的

一团扭来扭去还弯弯曲曲的代码，可维护性直降负分，谁愿意接盘谁倒霉，随着项目逐渐复杂，每改动一处都像是一锤子锤在接盘侠的胸口上 —— 痛苦无比，只要团队里有新手，不管技术 leader 怎么制定模块拆分的规范都无法避免这种事的发生，最终接盘侠们也抛了盘……

为什么呢？

因为 leader 的规范只是写在文档上的意见型规范，你可以不遵守也能让项目跑起来。而 react 和 vue 等 MVVM UI 框架（以下简称 UI 框架）的优势就立即凸显出来了，这让它们很快把过去的王者 jquery 击败了，这些 UI 框架的最伟大之处就在于，它们提供了一种可维护性更高的代码组织模式 —— 组件化，并强制大家都使用这种方式来开发应用。组件化中，html 、js 、css 以组件为最小单元聚合，组件之间相互解耦，大概是这样的

它们形成了一种制约型规范，不遵守项目就无法跑起来，这种方式让天底下的前端开发者达成了统一的模块化共识，就像你家的电源插槽那样统一。

我觉得以上就是框架和库的区别！！！

这种制约型规范才能让组件库百花齐放，各种组件库开始诞生进一步为大家减少开发量。

这就是制约型规范的威力，可能你突然就懂了为什么要用 husky 了。

而使用数据驱动视图的 MVVM 模式，虽然相比于 jq 也是降维打击的存在，但我觉得它的重要性并没有组件化伟大。

（重要）制定规范的目的除了规范变量名和注释外，更重要的是在代码组织层面实现高聚合、低耦合， 不陌生吧，而且我觉得 vue 的 SCF 、指令相比 react 的 jsx 又进一步做到了强制型规范。

（解答各位的质疑） alova 的优势在究竟哪里

如果你理解了上面的规范问题，我们再接着聊相比于react-query、swr、vueuse 的 useFetch以及ahook 的 useRequest等，alova 有什么特别之处？我很认同作者在《是时候该换掉你的 axios 了》中的评论：

在得知我还要再发一篇深度解析文后，在周一晚上，作者找到了我，聊了 3 个小时，他表达了不希望 alova 被我带偏了，那次聊过后也体会到了作者的思想，大概如下：

js 库可以分为规范型 js 库和功能型 js 库

规范型 js 库

像 react 和 vue 等 UI 框架除了提供 api 外，还提供了组件化（制约型规范），很显然是规范型的库，即框架。

功能型 js 库

如 axios 、moment 、lodash 、jquery 等都是属于功能型 js 库，它们更多的价值是提供便于调用的 api ，而 react-query 和 swr 等确实是使用 use hook 管理请求以及使用请求缓存的先驱者，但好像除了这些再没有规范层面的影子，因此更倾向于把它们归类到功能型 js 库中，贴上示例。

react-query 官方示例简析

function Example() {
  // 在每次 useQuery 中调用 fetch 或 axios 发送请求，耦合度较高
  // 需手动维护 queryKey
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
        (res) => res.json(),
      ),
  })

  if (isLoading) return 'Loading...'
  if (error) return 'An error has occurred: ' + error.message
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

swr 官方示例简析

// 耦合的方式请求
const fetcher = url => fetch(url).then(r => r.json())
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

// 解耦的方式
import useSWR, { SWRConfig } from 'swr'
function Dashboard () {
  const { data: events } = useSWR('/api/events')
  const { data: projects } = useSWR('/api/projects')
  const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // override
  // ...
}
 
function App () {
  return (
    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
      }}
    >
      <Dashboard />
    </SWRConfig>
  )
}

我觉得 vercel 团队是有思考到这点的，只是把解耦的方式作为了一个可选项。

alova 的不同之处

虽然 alova 相比于 axios 、react query 、swr 等前辈大咖，alova 只能算是新秀中的新秀，其他库已经发展了 5 到 10 年了，作者好像也比较低调。但在我看来 alova 在解决思想上和前辈们相比会更加深入，也更加彻底。

alova 的作者提出了一个叫 RSM 规范（请求场景模型） 的模型，并让 alova 遵循这个模型来设计，官方示例代码如下：

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';

const alovaInstance = createAlova({
    // 假设我们需要与这个域名的服务器交互
    baseURL: 'https://api.alovajs.org',

    // VueHook 可以帮我们用 vue 的 ref 函数创建请求相关的，可以被 Alova 管理的状态
    statesHook: VueHook,

    // 请求适配器，我们推荐并提供了 fetch 请求适配器
    requestAdapter: GlobalFetch(),
    
    // 全局请求前钩子
    beforeRequest(method) {  
        // ... 
    },
    
    // 全局响应钩子
    responsed: {
        onSuccess(response, method) {
            // ...
        },
        onError(err) {
            // ...
        }
    }
});

// 创建一个 Get 实例，描述一次 Get 请求的信息
const todoListGetter = alovaInstance.Get('/todo/list', {
    // 请求头
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    // params 参数将会以?的形式拼接在 url 后面
    params: {
        userId: 1
    },
    
    // 单独为这个请求设置缓存时间
    localCache: 50000,
    // 单独为这个请求开启请求共享
    shareRequest: true,
    // 数据转换
    transformData(result) {
        // ...
    },
    // ...
});

从以上示例中，可以看出 alova 的以下两个优势：

1. alova 以请求适配器、存储适配器、UI 框架适配器的方式，将请求工具和请求方式进行了强制解耦，实现了低耦合，提高了代码的可移植性，而不是可选项。
2. alova 中的 Method 概念，用于实现 RSM 的请求行为，它也强制将请求相关的信息、请求行为相关的信息高度聚合在了 Method 中，实现了高聚合。

作者原话告诉我：alova 提供了高聚合低耦合的代码组织方式，可以更大程度地管理请求相关的代码，随着项目越来越复杂，它的优势也就会慢慢显现出来，而且在编码方面也更加统一了。同时保持了高度了灵活性，供用户提供了足够的自定义空间。

因此，我会把 alova 放在介于规范型库和功能型库的中间位置

最后，据官网介绍，alova 的目标是通过按业务场景来实现兼开发体验和用户体验为一体，而 alova 的高度灵活性就可以支持自定义策略，你可以封装了公司内部用，比如你的公司很喜欢用某种处理来优化性能，或者写成 alova 插件一样的自己的策略库，那 alova 刚好都可以提供支持。

说到这边，好像 alova 的 use hook 形式显得好像没那么重要了，这个就要问作者了🙄。不懂有没有解答大家的疑问。

（升华）开源框架罪恶史

react 和 vue 都更关注 UI 层面，它们简化了 UI 层面的问题，但据我的理解，目前从 js 逻辑的层面却还是没有统一制约规范，或相关的 js 逻辑框架来解决这个问题，新手和高手写出的代码可维护性上还是有一定差距的。UI 框架让事情简单化的同时，也养肥了一堆躺在 UI 框架的成绩上好吃懒做的人，这些人往往会有以下两个问题：

1. 不再思考规范问题、模块之间的界限和协作，甚至都意识不到这些东西的存在，然后不分职责、把代码到处乱写，请想象有一只狗到处乱拉……，然后堆积成的叫什么山😎。
2. 他们只享受上层成果，不再关注底层的东西，哪怕稍微底层一点的，因为确实用不着了，就像我们不再关注垃圾回收的问题（ C 语言里是需要手动回收的），更离谱的是，有些人连getElementById、appendChild、insertBefore是干什么的，更别问他们 nodetype 有几种类型，fragment 是什么，注释是不是一种 node 等等。

可想而知，尖端人才变少是有理由的，知道为什么高级前端难招了吧！！！当然也不乏一小部分喜欢钻研的同学，喜欢知其然知其所以然。

这好像是时代发展、科技进步带来的无法避免的副作用，它们为我们提供了强大且便利的工具外，也在慢慢摧残着这么一大群人，和平年代不需要那么多英雄。这让我又想到了《反脆弱》里的观点 —— 现代化是这个世界的脆弱推手。

插个题外话，毕竟 react 和 vue 接管的是 UI 层面的组件化规范，但在 js 逻辑层面的规范都还停留在文档上，还没有形成制约型规范，在这个层面新手朋友一样可以把它们写成意大利面，有兴趣的同学也可以开始思考一下了，有没有可能从 js 逻辑层面提出制约型规范，然后形成一个新的 js 框架，就像 UI 框架组件化规范一样，如果有人做到了，可否回来留言告诉我下😌😌😌

结尾

这篇文章并没有去解决一个具体问题，能看到这里的同学，看来都是学习和交流的同学。

那问题来了，你们理解的代码规范是怎样的呢？