vue一个页面发出多个异步请求_Vue异步请求最佳实践
一、当前存在的问题
目前项目前端请求后台数据的方式是这样的:
页面中method中dispatch到action
action调用mutation,请求axios
请求到数据后存储到state中
页面中在computed中获取state,使用watch监听到数据变化之后做业务逻辑。
调用流程如图:
在当前的项目中,这样的调用方式可以解决异步请求,对于接口的响应速度也很快。但依然有着几点不足。
1.代码冗余
页面中的每一个请求都需要一个method,一个comuputed和一个watch。我们知道computed是计算属性,是Vue数据驱动的重要实现。但在计算属性里获取state这个操作并没有去"计算"。实际上是用了mapstate获取了全局的state,计算属性在这里成了一个state的容器。
2.业务逻辑依赖watch
我们知道watch是监听器,但是用监听器去监听计算属性(数据驱动的)的变化,是本末倒置了。可以看看Vue官方文档是如何描述监听的:
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
watch应该是作为computed的补充,而不是代替。所以当前的问题是大量的业务逻辑写在watch里,而不是在调用接口,数据返回之后立即处理
3.错误的mutation使用
为什么是错误的呢?我们先看看为什么会有上面两个错误的出现。当我们把axios写到muta
vue一个页面发出多个异步请求_Vue异步请求最佳实践相关推荐
- vue一个页面发出多个异步请求_vue(6)—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
- vue关闭页面发出请求
vue关闭页面发出请求: 问题描述: 要求在页面关闭时,向后端发送一个请求.但是有时候会请求成功,有时候后端不会收到请求 mounted() {this.messageWrapper = docume ...
- vue一个页面用两个以上页面 时时刷新
vue一个页面用两个以上页面刷新 <template><el-tabs v-model="activeName" style="padding-left ...
- vue 一个页面有点请求需要同时发送_前端性能优化,这些你都需要知道
来源: 海洋里的魔鬼鱼 前言 最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着. 性能优化总结:减少请求次数.减小资源大小. ...
- axios请求失败重新发起请求_vue axios请求超时,设置重新请求的完美解决方法
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...
- vue 一个页面多个router-view如何配置子路由_前端开发:如何安装配置Vue路由?
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
- vue 一个页面多个router-view如何配置子路由_浅谈vue前端开发架构
通常我们开发出来的网页大都是通过.html文件,渲染与浏览器,也就是UI呈现给用户的. 一个UI page,一般会涉及到资源文件,样式排版,UI交互: 多个UI page,就涉及到UI交互响应: 那么 ...
- vue——一个页面实现音乐播放器
请忽略下面这段文字 年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实. 不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一 ...
- vue 一个页面根据状态渲染不同的组件 使用currentView动态渲染
1.在当前vue页面导入所需要的组件 组件目录: 注:index.vue就是要渲染的页面 在data中定义变量: components: {submitVeterans: () => impor ...
最新文章
- JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念...
- 第一次来请大家多多关照---毕业生找工作篇
- windows下 apache 二级域名相关配置
- java调用keras theano模型_使用Keras获得模型输出的梯度w.r.t权重
- java ==号比较String字符串的地址
- MySQL配置日志服务器_mysql配置数据库日志
- Oracle/PLSQL FOR Loop
- 如何利用GitHub Pages快速构建免费网站?
- JDK Windows安装
- oracle 索引快速全扫描,用Oracle 9i全索引扫描快速访问数据
- 201542010208、201571030331软件工程结对项目
- andriod连接mysql测试工具,Android数据库调试工具
- Python 深度学习常用包汇总
- 蓝桥杯试题 基础练习 圆的面积
- sql server升级打补丁
- 纵观大数据:建模、分析及应用
- IDEA中如何设置键盘快捷键可用
- 【开源电机驱动】H 桥驱动-软件篇
- 施工图审制度全面取消:图审单位退场,整顿建筑设计行业乱象
- Oracle 12 创建数据库
热门文章
- 为什么电源正极进来后要先过大电容,再过小电容?
- 三维GIS、BIM、倾斜摄影、实时视频流 进行融合,建立CIM环境,搭建数字孪生、元宇宙平台 免费下载 开发C++源代码 点卯-魔镜系列
- Spring MVC 使用支付宝接口DEMO
- STM32F4xx实现接入Internet的“基石”——PartA
- Dolphin social network——海豚社会网络数据集的简单研究
- 【报告分享】2021三八节美妆行业营销报告-WEIQ(附下载)
- 安卓7.1系统源码 屏蔽系统home键 (平台msm8909)
- 锐捷云课堂服务器装什么系统,锐捷云课堂2.0系列产品详细介绍
- VMware+Centos7安装
- 人生苦短,我用Python。