新栏目:开源项目的经历
希望大家看完觉得不错的话给个三连,给点动力
项目地址:
GitHub : https://github.com/dromara/hertzbeat
Gitee:https://gitee.com/dromara/hertzbeat
官网: https://console.tancloud.cn/
官网采用了CDN,如果打不开的话,可以在gitee/gitHub下方找地址哦

我参与的一个开源项目最近被使用者提交了一个bug,bug是这样的
我来描述下,这位兄弟遇到的情况是这样的:

场景描述


正常场景喜爱,我们这是有渲染出来数据的,但是根据这位老哥的反馈,我复现了一下这个bug,而且复现的概率还是挺高的

我这后退到上一个其他的页面,然后在前进跳转回来,就会很大概率复现这个bug,

看到了么,前进后退是请求了接口的呀,而且接口也返回数据了,但是为啥前端没有渲染出来呢?

问题排查

一开始觉得这个get请求,是不是浏览器缓存的原因,但是看了请求头

并没有使用缓存的请求头,而且缓存造成的应该是看到老数据看不到新数据,这个场景是什么都看不到,虽然我这个接口在这个页面10s循环调用,然后就发现第二次请求到的结果又能渲染出来了,所以我就把问题归位前端的问题了,是不是什么生命周期函数错误使用了之类的?

解决问题

前端技术:Angular
因为对前端不熟悉,只能询问作者老哥,在老哥的慧眼下也发现了问题,根据观察得到的结论就是:数据更新了但是angular没有感知到,所以不会更新视图层的结果,也就是说回调函数的返回结果,不会自动更新视图层的显示,angular这次不会主动更新视图,那么我们就可以强制它去更新视图,所以在这次请求完之后,我们在前端代码中添加了这样的一行代码

    this.changeDetector.detectChanges();

至此本地自测没有了这种情况,我私下也搜索了一下关于detectChanges函数的含义:

angular会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图。这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,因此,就需要ChangeDetectorRef来实时检测数据的变化并更新视图数据

我理解的就是页面组件多,都在检测组件是否变化,导致有了一定的延迟,强制我们的angular来实时检测页面及其子元素的变化,这样一来,只要子元素发生了变化,我们的angular会立即更新视图,达到实时渲染的目的

觉得还是前端视图理解的不够,后面还要认真学习啊
好了今天就到这了,感谢大家的三连啊!!!

开源项目:浏览器前进后退发现请求了接口,也有数据返回,但是前端并没有渲染数据是什么问题?相关推荐

  1. Flutter-防京东商城项目-创建商品数据模型 、请求Api接口渲染热门商品 推荐商品 获取数据然后模型赋值-06

    一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...

  2. Node 应用篇!推荐 10 个好用的 Node 的开源项目 YYDS

    大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫又在线营业啦 ~ 平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目 1. puppe ...

  3. 2018 Github优秀开源项目整理

    目前开源社区Github涌现出不少优秀的项目,关注和使用这些项目,一方面可以很好的提升开发效率与质量,另一方面研究开源项目的源码,参与其贡献,也是提升技术能力一个不错的方法. 基于自己团队的需求,以后 ...

  4. 2017 Github优秀开源项目整理

    所有项目整理到一张思维导图: http://chenhaoact.com/github-project-recommend.html github项目地址(每周更新,欢迎star): https:// ...

  5. iOS学习资源汇总(开源项目、第三方库、技术博客等等)

    iOS学习资源汇总(开源项目.第三方库.技术博客等等) 字数3919 阅读10309 评论29 喜欢297 前言 Github众所周知,全球最大的同性社区交友网站,在这里你可以获取任何你想要的,只要你 ...

  6. iOS学习资源汇总 - 开源项目、第三方库、技术博客

    前言 Github众所周知,全球最大的同性社区交友网站,在这里你可以获取任何你想要的,只要你想,只要Ta有. 从事开发几年在Github上Star了不少好的东西,当然学到了更多,在此深深的膜拜下那些开 ...

  7. iOS学习资源汇总(开源项目、第三方库、技术博客)

    本文转自:http://www.jianshu.com/p/b7c4a787a597 仅供学习 前言 Github众所周知,全球最大的同性社区交友网站,在这里你可以获取任何你想要的,只要你想,只要Ta ...

  8. huggingface实操_盘点2018年度GtiHub开源项目TOP 25

    本文作者 Pranav Dar 是 Analytics Vidhya 的编辑,对数据科学和机器学习有较深入的研究和简介,致力于为使用机器学习和人工智能推动人类进步找到新途径.2018 这一年中,作者在 ...

  9. 2018 年度 GtiHub 开源项目 TOP 25:数据科学 机器学习

    2018 年度 GtiHub 开源项目 TOP 25:数据科学 & 机器学习 雷锋网 AI 科技评论按:本文作者 Pranav Dar 是 Analytics Vidhya 的编辑,对数据科学 ...

  10. 视觉盛宴篇!推荐 12 个好用的 CSS 的开源项目,YYDS !

    大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫又在线营业啦 ~ 平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目 1. anima ...

最新文章

  1. 一文详解目标跟踪中的相关滤波
  2. 网络工程制图论文计算机,学习系统与工程制图论文
  3. 美团点评基于 Flink 的实时数仓平台实践
  4. 生命周期 用户可以操作dom_React 生命周期的打怪升级之路
  5. linux下调试core的命令
  6. 分布式认证-技术方案
  7. 微软将终止免费的条码标签服务
  8. 真香!8 行代码搞定最大子数组和问题
  9. Java基础日常总结!!
  10. Go编程模式--流水线模式
  11. ulead gif animator_搞笑GIF:家庭聚餐,还有三十多个没来呢?|搞笑gif
  12. pytorch_basics Save and load model
  13. class加载原理和Dex加载的原理-----android插件化技术
  14. 什么是Bootstrap?
  15. 《Adobe Audition CC经典教程》——1.5 使用外部连接器
  16. MATLAB 高等数学中的应用
  17. shopex4.8.5 php5.6,shopex v4.8.5 漏洞
  18. linux驱动更新软件下载,NVIDIA英伟达显卡驱动程序更新下载(32/64位) v384.90 Linux版...
  19. Unity3D 文字线条效果
  20. python命名规则数字开头的成语_浅谈Python中带_的变量或函数命名

热门文章

  1. semantic ui中文文档_一起学Vue:UI框架(element-ui)
  2. 怎么在电脑上看磁盘分配单元的大小_不升级配件、4种方法让电脑提速50%!
  3. 实战Python:利用Python实现基于终端的文本行编辑程序
  4. php7视频处理扩展_PHP7扩展开发之类型处理
  5. 标定_基于全景基础设施的多摄像机和3D激光雷达校准
  6. marathon 测试
  7. 5分钟学会如何玩转云数据库组件(迁移,审计,订阅)
  8. 支持向量机(Support Vector Machine,SVM)—— 线性SVM
  9. 数据库存储过程、触发器、函数的使用
  10. information_schema.profiling学习