问题记录
如下图,可以看到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请求。