3个月后，我把请求代码生成优化到了极致

古韵
4,297 阅读6分钟

请求代码自动生成方案大家都听过吧？没错没错，就是那个openapi规范生成的，总觉得差点东西。

研究了3个月，我已经将前后端协作流程简化成了1步到位！

通常情况下，前后端协作是一件繁琐的事情，平时我们可能是这样一个流程：

  1. 后端通知前端“xxx接口好啦”
  2. 先翻api文档找到新增的api
  3. 回到自己的代码里，把全部新api定义调用函数
  4. 要是用TS的话，还得手动加类型定义
  5. 在不同的页面中，选用对应的api调用函数
  6. 引入调用函数
  7. 写复杂的调用逻辑，例如分页还需要控制页数参数

我们把上面的123467全部去除了，甚至消除了中间的api文档这个环节，让你在编辑器里边查边调用api，这可能会改变你日后的开发方式。

这到底是怎么回事呢？先来看个演示。

Code2.gif

让我来细细解释下。

自动生成

根据openapi规范自动生成api调用代码，这应该是老生常谈了，而我的方案是通过VSCode插件，不管你用的是ESModule、CommonJS还是TypeScript，点击一下编辑器右下角的生成按钮，它就会根据项目类型自动生成对应规范的接口调用代码，和对应的响应类型，不论在js项目还是ts项目中都可以体验完整的代码提示功能。

自动生成代码

生成的代码中包含以下内容：

image.png

  1. apiDefinitions.js用于记录生成的api路径和请求方式。
  2. createApis.js通过proxy，根据apiDefinitions.js动态创建调用函数，可以减少大量模板代码。
  3. globals.d.ts提供完整的代码提示功能。
  4. index.js用于用户自定义配置。

这就把流程中的第34步砍掉啦。

然后我们还可以设置定时检测openapi文件更新状态，有更新的话立马提醒你，保证你用的永远是最新鲜出炉的api定义，这下连后端小伙伴通知你api更新都省了，又干掉流程中的第1步。

现在流程是这样的：

  1. 后端通知前端“xxx接口好啦”
  2. 先翻api文档找到新增的api
  3. 回到自己的代码里，把全部新api定义调用函数
  4. 要是用TS的话，还得手动加类型定义
  5. 在不同的页面中，选用对应的api调用函数
  6. 引入调用函数
  7. 写复杂的调用逻辑，例如分页还需要控制页数参数

在编辑器中边查边用API

为了干掉第2步，我们真的绞尽了脑汁，那就一不做二不休，干脆把api文档搬到编辑器里吧，在你用接口的时候对照着描述把参数抄进去。

以下是一个js项目的演示，没有任何额外配置。

image.png

通过全局的Apis访问接口，在入口文件中引用一下src/api/index，然后在所有地方都可以直接访问，这就又干掉了第7步，而且编辑器的智能提示显示当前api的所有信息。

image.png

填写参数时也可以看到参数的提示和描述。

image.png

响应数据提示如下。

image.png

通过接口路径查找API

什么玩意儿？不知道具体引用名是啥？没关系，用API的调用路径也能找到：

image.png

通过描述查找API

实在是什么都不记得了？那就用API描述里的关键词搜吧：

image.png

至此，第2和6步也干掉了：

  1. 后端通知前端“xxx接口好啦”
  2. 先翻api文档找到新增的api
  3. 回到自己的代码里，把全部新api定义调用函数
  4. 要是用TS的话，还得手动加类型定义
  5. 在不同的页面中，选用对应的api调用函数
  6. 引入调用函数
  7. 写复杂的调用逻辑，例如分页还需要控制页数参数

请求策略模块

那第7步要怎么解决呢，当然是根据不同使用场景封装调用逻辑啦，虽然想想场景好像很多，那我们就先封装常用的行不行，所以就有了下面的这些封装，我们称之为“请求策略模块”，因为不仅仅是封装，还做了很多性能优化。

下面举了部分简单的例子，例如分页请求这样用：

const { loading, error, data, page, pageSize, total } = usePagination((page, size) =>
  alova.Get('/api/user/list', {
    params: { page, size }
  })
);

表单提交这样用：

const {
  // 提交状态
  loading: submiting,
  // 响应式的表单数据
  form,
  // 提交数据函数
  send: submit,
} = useForm(
  formData => formSubmit(formData),
  {
    // 初始化表单数据
    initialForm: {
      name: '',
      cls: '1'
    }
  }
);

监听请求这样用：

const { loading, data } = useWatcher(
  // 状态改变将触发此函数一次
  () => filterTodoList(userId.value),

  // 被监听的状态数组
  [userId]
);

现在，终于简化成只剩一个步骤了。

  1. 后端通知前端“xxx接口好啦”
  2. 先翻api文档找到新增的api
  3. 回到自己的代码里，把全部新api定义调用函数
  4. 要是用TS的话，还得手动加类型定义
  5. 在不同的页面中，选用对应的api调用函数
  6. 引入调用函数
  7. 写复杂的调用逻辑，例如分页还需要控制页数参数

最后的彩蛋

到这里，相信你们已经感受到这个插件的方便之处了吧？这个其实是我们专门为alova量身打造的VSCode插件！

而我们的彩蛋是，alova也终于迎来了3.0的大升级，重新设计底层架构和全面重构，现在它可以完全在客户端和服务端中使用，除此以外，为了让使用更简单，这次升级废弃了10项配置，9项优化，如果觉得alova不错，请在Github为我们点星。

访问alovajs的官网查看更多详细信息：alovajs官网。

而这个插件不仅仅是一个普通的开发工具，而是将alova的便捷性发挥到了极致，通过这个插件，我们把alova的使用体验提升到了一个全新的高度，真正实现了"像调用本地函数一样简单"的目标。

不过现在这个插件我们团队正在进行最后的优化和测试，将在近期发布，好东西总是值得等待的。也欢迎大家在评论区告诉我们你的想法、吐槽或建议。

如果你是alova的使用者，或者有兴趣体验我们的项目，可以加入我们的微信交流群，在第一时间获取到最新进展，也能直接和开发团队交流，提出你的想法和建议。

如果你想加入我们的交流社区，欢迎扫描下方二维码：

加入交流社区后，你就能获得：

  1. 插件和alova的最新消息
  2. 与其他开发者交流使用心得
  3. 直接向开发团队提出建议或反馈问题
  4. 可能的内测机会

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

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

avatar
文章
阅读
粉丝