Vue created() 里同步

假如我们在Vue的勾子函数里created放了2个回调函数

 created() {this.initLinkGruopList()this.getList()},// 第一次获取链接分类列表数据initLinkGruopList() {this.urlmethod(this.url.linkManage.clasList_link, null).then(res => {this.linkGroupData = [...res.data]this.rootLinkId = this.activeLinkId = res.data[0].idthis.activeLinkName = res.data[0].namefor (let i = 0; i < 100000; i++) {console.log(i)if (i == 100000 - 1) {alert('over')}}}).catch(err => {console.log('err', err)})},getList() {this.loading = trueconst reqPara = {data: {pageIndex: this.pagination.currentPage,pageSize: this.pagination.pageSize,clasId: this.activeLinkId}}//   const response = await this.getLinkGruopList()this.urlmethod(this.url.linkManage.list_link, reqPara).then(res => {this.data = [...res.data.list]this.data.forEach(item => {this.linkGroupData.forEach(element => {if (item.clasId === element.id) {item.clasName = element.name}})})this.pagination.total = res.data.recordTotalthis.loading = false}).catch(err => {console.log('err', err)this.loading = false})},

熟悉执行栈回调函数和异步的同学(不熟悉的可以看我前期博客，有专门讲这一块)，会知道上面例子的执行顺序，先执行initLinkGruopList()，因为这个函数是用了axios异步请求，所以返回给主线程一个回调标记，第二个getList开始执行，第二个也是返回给主线程一个回调标记，这时主线程没有了任务队列，于是看这两个回调函数哪个跑的快,就先执行哪个。

问题来了，假如我只想第一个先执行，等拿到了它的结果，再执行第二个呢？

 async created() {await this.initLinkGruopList()this.getList()},// 第一次获取链接分类列表数据initLinkGruopList() {return new Promise((resolve, reject) => {this.urlmethod(this.url.linkManage.clasList_link, null).then(res => {this.linkGroupData = [...res.data]this.rootLinkId = this.activeLinkId = res.data[0].idthis.activeLinkName = res.data[0].namefor (let i = 0; i < 100000; i++) {console.log(i)if (i == 100000 - 1) {resolve()}}}).catch(err => {console.log('err', err)})})},async getList() {this.loading = trueconst reqPara = {data: {pageIndex: this.pagination.currentPage,pageSize: this.pagination.pageSize,clasId: this.activeLinkId}}//   const response = await this.getLinkGruopList()this.urlmethod(this.url.linkManage.list_link, reqPara).then(res => {this.data = [...res.data.list]this.data.forEach(item => {this.linkGroupData.forEach(element => {if (item.clasId === element.id) {item.clasName = element.name}})})this.pagination.total = res.data.recordTotalthis.loading = false}).catch(err => {console.log('err', err)this.loading = false})

用async/await+promise就搞定啦，为了效果区别明显，我故意for里循环了100000次。

Vue created() 里同步相关推荐

Vue实例里this的使用
2019独角兽企业重金招聘Python工程师标准>>> 要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以 ...
created不能异步_mpvue里created里异步请求结果，如何在beforeMount里获取到呢
问题描述用mpvue做小程序时,要在首页展示轮播图之前获取到token,openId,并在请求获取轮播图时候在header里传进去,后面所有接口都需要这两个头部信息.我想在created里获取到这两 ...
Vue created/mounted 异步获取不到data中的数据
最近在开发时遇到了个小坑,在没详细了解Vue的生命周期前,总以为mounted函数一定会在created函数完成后执行,但实则不然. 如果呈现在页面上的数据是静态的,比如说像下面这样数据是写死不变化的 ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
Vue框架里使用Swiper - 安装篇
Vue框架里使用Swiper npm安装swiper cnpm install swiper 相关阅读 Vue框架里使用Swiper 如何在Vue项目中优雅的使用swiper插件 https://ww ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...
VUE created与mounted区别
VUE created与mounted区别一.created mounted 1)created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. 2)mounted:在模板渲 ...

Vue created() 里同步

Vue created() 里同步相关推荐

最新文章

热门文章