alova.js--属于全干工程师的请求库
📌 缘由
这是来源于某个交流群的一位大佬的推荐（几个月前推荐的，但是我一直没时间去体验），正好最近有外包项目而且前端工程师比较忙，所以有一些部分是我来做的，正好可以体验一下。
TIP
目前已经用这个请求库写了两个页面了。
📖 介绍
alova.js 是一个以效率为目的的请求库，不仅有着类似的 openapi-typescript-codegen 的使用方法，还有缓存机制，还有 20+ 常见的请求策略。在 vscode 集成可以实现边提示文档入参边一键生成请求代码。
INFO
虽然我喜欢 idea，前端和后端都是用 idea 写的，当然也有 idea 的使用方法，只是可能没有 vscode 集成起来之后爽。
🛠️ 使用步骤
1. 安装 alova.js
npm install alova --save
2. 安装 wormhole
用来生成请求代码，我用的 idea，vscode 需要下插件进行集成：
npm i @alova/wormhole --save-dev
3. 生成配置文件
当前目录，自动选择配置文件类型：
alova init
4. 修改配置文件
根据需要修改，我改的是 openapi 的 json 文件的地址：
input: 'http://localhost:8219/v3/api-docs/all',
5. 生成请求代码
根据配置文件的 openapi 的 json 地址：
alova gen
6. 取消缓存策略
WARNING
我做外包要考虑啥性能？？
cacheFor: 0
📂 生成产物
然后你会发现你配置文件指定的输出地址会生成四个文件，这些是关于请求的代码：
| 文件 | 作用 |
|---|---|
index.js | 创建 alova 实例的地方 |
globals.d.ts | 返回类和请求方式定义的地方 |
createApis.js | 构建请求代码的文件 |
apiDefinitions.js | 存放请求地址的地方 |
🎯 使用示例
GET 方法
const res = await Apis.controller.getUsers({
headers: {
'Authorization': localStorage.getItem('token')
}
});
这样直接就能获取返回的数据了，是不是连请求地址都看不见。
TIP
为什么是 getUsers 呢？这是你的某个 controller 下的某个方法，是不是感觉一下就拉近距离了。
POST 方法
const res = await Apis.general.saveRole({
headers: {
'Authorization': localStorage.getItem('token')
},
data: {
role: selectRole.value,
roleMenuName_zero: ["" + selectZeroMenu.value],
roleMenuName: selectMenu.value.map(String)
}
});
WARNING
你这怎么变成 Apis.general 了，刚刚上面那个明明不是这样的。
这可能应该牵扯后端定义 openapi 的时候的规范了，总得来说，后端确实没有进行良好的 openapi 良好的规范。还有一种可能，我后端是 openapi3 规范，而 alova 只支持到 swagger2 规范好像（general 是默认分组）。
我做外包我考虑这么多干嘛呢 😇
✨ 感受
目前写了两个页面，感觉还是很不错的，只需要想到自己写的后端 controller 的方法，就能请求到数据，而且在生成的文件中也附加有 swagger 的注释。