alova.js--属于全干工程师的请求库

缘由

这是来源于某个交流群的一位大佬的推荐（几个月前推荐的，但是我一直没时间去体验），正好最近有外包项目而且前端工程师比较忙，所以有一些部分是我来做的，正好可以体验一下。（目前已经用这个请求库写了两个页面了）

介绍

alova.js 是一个以效率为目的的请求库，不仅有着类似的openapi-typescript-codegen的使用方法，还有缓存机制，还有20+常见的请求策略。在vscode集成可以实现边提示文档入参边一键生成请求代码。（虽然我喜欢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. 取消缓存策略（我做外包要考虑啥性能？？）

cacheFor: 0

然后你会发现你配置文件指定的输出地址会生成四个文件，这些是关于请求的代码

1. index.js 创建alova实例的地方
2. globals.d.ts 返回类和请求方式定义的地方
3. createApis.js 构建请求代码的文件
4. apiDefinitions.js 存放请求地址的地方

使用

const res = await Apis.controller.getUsers({
      headers: {
        'Authorization': localStorage.getItem('token')
      }
    });

这样直接就能获取了返回的数据了，是不是连请求地址都看不见 为什么是getUsers呢？这是什么呢？

这是某一个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)
    }
  })

你这怎么变成Apis.general了，刚刚上面那个明明不是这样的

感受

目前写了两个页面，感觉还是很不错的，只需要想到自己写的后端controller的方法，就能请求到数据，而且在生成的文件中也附加有swagger的注释