优化数据请求——前端调用接口篇！写在前面的话 最近开发的会议系统，随着会议规模的增加，在人员排座方面就迎来了首次加载缓慢

写在前面的话

最近开发的会议系统，随着会议规模的增加，在人员排座方面就迎来了首次加载缓慢的问题。优化就在所难免了，那么是修修补补还是直接重构呢？想起我那屎山代码领路人说的一句名言

“代码能跑就行的，跑不动了再重构！”

本着这个原则，重构是不可能的。 那么该如何最小化的优化这屎山代码呢？接下来进入正题！

优化逻辑

在不对接口本身进行优化的前提下，前端提升接口请求的速度可以是：

1.能不查的就不查（接口后置，待一定条件下用到的时候再进行查询）

2.能一起查的就一起查（同步变异步）

3.能少查的就少查（如分页等，展示部分信息）

业务分析

要优化接口就要理解这些接口是在什么场景下面调用的。 那么从待优化的界面上大致可以分成：

• 顶部区域（top）:功能有控制底部排座面板的拖动，放大，缩小，概览，切换成智能排座，各类排座内容的配置等功能。
• 左部区域（left）:功能有展示参会人员，对参会人员进行分类，并拖动勾选的人员到底部面板进行排座。
• 底部区域（bottom）:功能为对会议布局的操作，展示布局，单个或批量的对人员进行拖拉拽的操作。 再结合对应布局所涉及的接口

再罗列出页面涉及到的接口和所耗费的时长：

接口名称	接口	耗时/毫秒
获取参会人员信息	fhy/meetingreportuser/getReportUserList	2570
获取会议室布局	fhy/meetingroom/get	516.84
获取参会人员单位别名	fhy/fhySeatMapController/seatInfoByConfig	387.20
获取会议分组信息	fhy/meetinggroup/getGroup	368.84
获取会议信息	fhy/meetingnotice/get	26.48
获取座位显示配置	fhy/meetingseatconfig/getConfig	48.51

读到这里应该对业务有个大致的理解了

哪些接口可以先查？

了解过业务之后可以找到 获取会议分组信息（fhy/meetinggroup/getGroup） 该接口可以先不在页面初始化的时候进行操作。

那么已知人员进行筛选的时候才用到的分组信息，求如何优化页面初始化接口？

答：接口懒加载，在涉及分组查询时加载对应数据，供搜索使用。

哪些接口可以一起查？

能一起查的接口是在筛选完先不查询的接口的条件之下进行的。在该场景下面可以得出，除了获取会议信息（fhy/meetingnotice/get）的接口必须先查之外其他接口都是可以放在一起查询的。判断能否一起查询的接口的条件也很简单(敲黑板了)咚咚咚。

一个接口的入参是否依赖另一个接口的返参，没有依赖则可同时查询！

一个不正经前端

屎山代码在这个时候就出现问题了，因为之前的编程风格是可以说是模块化的，每个区域对应一个初始化流程

1.获取数据=>2.渲染页面=>3.绑定事件

大致的页面加载顺序如下图 那么如上的编程风格的话就很难进行同时加载接口的操作。于是需要把每个模块的获取数据放在一起，达到下面的加载顺序就可以轻轻松松的完成同步查询的逻辑了。

代码层面的同步查询如下:

 // pTop.initData() 顶部区域获取数据
 // pBottom.initData() 底部区域获取数据`
 // pLeft.initData() 左部区域获取数据
 await Promise.all([pLeft.initData(),pTop.initData(),pBottom.initData()])
 

Promise.all 方法好呀！Promise.all 方法棒呀！ Promise.all 会等到入参数组 里面的方法全部执行完才会进行下面的代码逻辑。

哪些接口可以少查呢？

曾经有那么一瞬间我觉得我可以把握住她，让她为我改变，可惜我错了，被她那天真的脸庞给迷惑了。没错我说的是获取人员信息的接口（fhy/meetingreportuser/getReportUserList），我本以为该接口可以进行分页，从左部区域我已经看到了分页组件。

不曾想到是前端分页的，我带着三分疑惑，97分自信寻觅这接口调用的出处。看完潸然泪下，获取人员信息的接口不止用于左边面板的展示，还牵扯到底部面板人员的排座信息。底部的会议室布局座位是全部展示的，那对应的人员座位信息必然需要全部查出。如果要对获取参会人员信息的接口分页，那必须由另一个接口承当起人员的座位信息。 我恨呐，恨获取参会人员信息的接口接口太全面了。

其实本来不需要折腾这么久的，接口不行就在接口本身找问题。 接口他努力了吗？用了这么久的接口了，速度提升了吗？返回的垃圾数据变少了吗？关联的表变少了吗？ 接下来就是后端同学的接口本口优化篇。

未完待续...