【系统优化】优化功能-APP登录时重复调用接口

---

问题记录

如下图，可以看到APP登录时候会重复调用接口，这个对于系统的性能和对于带宽网络等资源进行了极大的浪费

getUserUnderwayCourse ：根据cookie去查询课程列表
insertUserCourseinfo：根据查询到的课程列表去插入课程–具体逻辑后端实现
这两个是更新当前账号的课程。
getUserUnderwayCourseClassState：根据课程id和班级id获取用户正在进行的班课和课程的状态

设计逻辑

逻辑解释：登录页面需要调用接口，home主页面也需要调用接口

重复调用的原因：h5是需要登录进入的，APP是直接免密登录进入的，当时设计的时候设计两个页面都需要去调用接口来查询。

优化一

优化思路：去掉登录页面存在的数据，直接在home主页面去调接口处理数据，反正所有的登录方式都是需要进入主页面的，直接在home主页面调用就OK，不必重复调用了。

优化后去掉红框中两个接口：

优化二

第二步，进入home页面查看，查看重复调用的接口。

可以看到这几个重复的接口都在getCourseByUser的方法中，找这个方法的调用

找到这个方法的调用有两处，一处是onload页面加载的，一处是页面下拉刷新触发的方法

排查方法：怀疑是页面加载之后会同步调用下拉刷新的方法，所以才会调用两次，先注释下拉刷新方法，测试一下果然只调用一次了，下面就优化下拉刷线方法

优化：下拉刷新方法中增加一个下拉刷新的次数，默认为0，下拉刷新一次就加一，方法中加一个判断，如果刷新的次数为0，那么不调用getCourseByUser方法，否则调用。
如下，

结果

到目前，已经优化结束，优化的最终结果：

总结

1、写代码时要逻辑清晰，画图明确之后再进行开发，同样的业务同样的接口不要在多个页面重复调用。
2、方法的调用要找准位置，按照程序执行的逻辑进行排查问题会很容易。
3、重复调用接口会浪费资源，资源是有限的，尤其重要。
4、遇事不慌，脑子清醒。

补充小知识

当遇到重复请求的时候需要注意一下请求是post请求还是get请求
1、post请求和get请求的区别：

也就是说post请求本身会有两个请求，一个请求类型是options（预检请求），一个才是post请求类型，

post请求一般为请求更新或者是插入的操作，get请求一般为请求查询的操作。
当然还有一种方式是请求的参数在三个以上就使用post请求了，这个称为复杂请求。

解释：
非简单请求就是复杂请求。

复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为“预检”请求（preflight）。预检请求为OPTIONS请求，用于向服务器请求权限信息。预检请求被成功响应后，才会发出真实请求，携带真实数据。

axios默认请求就是application/json,所以不需要自己加上头部（不需要在config中加headers），所以总是会发出options请求的，看看是不是配置的时候加了不必要的headers配置项。
另外，如果真的需要预检，后台也需要进行设置，允许options请求。